In diesem Artikel wird der Beispielcode für die Verwendung von Canvas zum Zeichnen eines Elektrokardiogramms vorgestellt und mit allen geteilt. Die Details lauten wie folgt:
Darstellung:
Idee:
1. Simulieren Sie Punkte (wenn Sie über echte Daten verfügen, wandeln Sie die Daten in Koordinatenpunkte um, die der Leinwand entsprechen.)
Beim Simulieren von Punkten ist zu beachten, dass die erhabenen Teile symmetrisch sein und zufällig nach oben und unten erscheinen müssen, damit sie gut aussehen.
2. Linien zeichnen
Beim Zeichnen von Linien müssen Sie auf die Bewegung mit konstanter Geschwindigkeit achten.
Beispielsweise geht es von Punkt A nach Punkt B nicht einfach von A nach B, sondern von Punkt A nach A1, A2 ... und schließlich nach B (es ist schwieriger, diesen Bereich proportional zu verschieben).
3. Einige Effekte des Strichzeichnens, z. B. das Hinzufügen von Schatten (Sie können es hier frei verwenden) eines bestimmten Codes
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Elektrokardiogramm</title> <meta name=viewport content=width=device-width, initial-scale=1, Benutzer -scalable=no> <style> html,body{ width: 100%; height: 0; 100 %; Höhe: 100 %; } </style> </head> <body> <div id=canvas> <canvas id=can></canvas> </div> <script> var can = document.getElementById( 'can'), pan, index = 0, flag = true, wid = document.body.clientWidth, hei = document.body.clientHeight, x = 0, y = hei/2, drawX = 0, drawY = hei/2, drawXY = [], cDrawX = 0, i = 0, reX = 0, reY = 0; function start(){ can.height = hei; can.width = wid; pan = can.getContext(2d); pan.streicheStil = weiß; pan.lineWidth = 6; pan.shadowColor = #228DFF; pan.shadowOffsetY = 0; pan.moveTo(x,y); index 1); }; Funktion drawXYS(){ if(drawX > wid){ }else{ if(drawY == hei/2){ if(flag){ flag = false; }else{ var _y = Math.ceil(Math.random()*10); _y = _y/2; if(Number.isInteger(_y)){ += Math.random()*180+30; }else{ drawY -= Math.random()*180+30; cDrawX = Math.random()*40+15; }else{ drawY = hei/2; } drawX += cDrawX; y : drawYS(); (){ var x = drawXY[i].x, y = drawXY[i].y if(reX >= x - 1){ reX = x; i++; return } if(y >= y){ reX = x; }else if(y <hei/2){ if(reY <= y){ reX = x; reX = x; reY = y; i++; return; [i].x-drawXY[i-1].x)/(drawXY[i].y-drawXY[i-1].y)); var _yt = (reX-drawXY[i-1].x)/c; if(drawXY[i].y < drawXY[i-1].y){ reY = drawXY[i-1].y - _yt; reY = drawXY[i-1].y + _yt; } cc(); } function cc(){ if(i == drawXY.length){ pan.closePath(); clearInterval(index); ; } } </script></body></html>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.