suchen

Heim  >  Artikel  >  Web-Frontend  >  So erzielen Sie mit HTML5-Canvas den Bewegungseffekt eines Elektrokardiogramms

So erzielen Sie mit HTML5-Canvas den Bewegungseffekt eines Elektrokardiogramms

不言
不言Original
2018-09-08 15:58:503261Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Verwendung von HTML5-Canvas, um den bewegenden Effekt eines Elektrokardiogramms zu erzielen. Ich hoffe, dass er für Sie hilfreich ist.

Rendering:

So erzielen Sie mit HTML5-Canvas den Bewegungseffekt eines Elektrokardiogramms

Ideen:

1 um die Daten in Koordinatenpunkte entsprechend der Leinwand umzuwandeln)

Bei der Simulation von Punkten müssen Sie darauf achten, dass die erhabenen Teile symmetrisch sein und zufällig nach oben und unten erscheinen müssen, um gut auszusehen

2. Linien zeichnen

Beim Zeichnen von Linien müssen Sie auf den Prozess der Bewegung mit konstanter Geschwindigkeit achten.

Zum Beispiel wird von Punkt A nach Punkt B nicht einfach nur von A nach B gezeichnet, sondern von Punkt A nach A1, A2 ... und schließlich nach B (es ist schwieriger, diesen Bereich zu verschieben). im Verhältnis)

3. Einige Effekte des Strichzeichnens, wie das Hinzufügen von Schatten (Sie können es hier frei verwenden)

Spezifischer Code

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>心电图</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <style>
         html,body{
             width: 100%;
             height: 100%;
             margin: 0;
         }
         canvas{
             background: #000;
             width: 100%;
            height: 100%;
         }
     </style>
 </head>
 <body>
 <div id="canvas">
     <canvas id="can"></canvas>
 </div>
 <script>
     var can = document.getElementById(&#39;can&#39;),
         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;
     start();
     function start(){
         can.height = hei;
         can.width  = wid;
         pan = can.getContext("2d");
         pan.strokeStyle = "white";
         pan.lineJoin = "round";
         pan.lineWidth = 6;
         pan.shadowColor = "#228DFF";
         pan.shadowOffsetX = 0;
         pan.shadowOffsetY = 0;
         pan.shadowBlur = 20;
         pan.beginPath();
         pan.moveTo(x,y);
         drawXYS();
         index = setInterval(move,1);
     };

     function 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)){
                         drawY += Math.random()*180+30;
                     }else{
                         drawY -= Math.random()*180+30;
                     }
                     flag = true;
                 }
                 cDrawX = Math.random()*40+15;
             }else{
                 drawY = hei/2;
             }
             drawX += cDrawX;
             drawXY.push({
                 x : drawX,
                 y : drawY
             });
             drawXYS();
         }
     }

     function move(){
         var x = drawXY[i].x,
             y = drawXY[i].y;
         if(reX >= x - 1){
             reX = x;
             reY = y;
             i++;
             cc();
             return;
         }
         if(y > hei/2){
             if(reY >= y){
                 reX = x;
                 reY = y;
                 i++;
                 cc();
                 return;
             }
         }else if(y < hei/2){
             if(reY <= y){
                 reX = x;
                 reY = y;
                 i++;
                 cc();
                 return;
             }
         }else{
             reX = x;
             reY = y;
             i++;
             cc();
             return;
         }

         reX += 1;
         if(y == hei/2){
             reY = hei/2;
         }else{
             var c = Math.abs((drawXY[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;
             }else{
                 reY = drawXY[i-1].y + _yt;
             }
         }
         cc();
     }

    function cc(){
        if(i == drawXY.length){
             pan.closePath();
             clearInterval(index);
             index = 0;
             x = 0;
             y = hei/2;
             flag = true;
             i = 0;
         }else{
             pan.lineTo(reX, reY);
             pan.stroke();
         }
    }
 
</script>
</body>
</html>

Verwandte Empfehlungen:

So verwenden Sie HTML5 Canvas zum Erstellen von 3D-Animationseffekten

Demonstration des Grafikcodes für HTML5 Canvas-Animationseffekte

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit HTML5-Canvas den Bewegungseffekt eines Elektrokardiogramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie nutzt HTML5 Web Storage? 2 Arten der Web Storage-Speicherung (Beispiele)Nächster Artikel：Wie nutzt HTML5 Web Storage? 2 Arten der Web Storage-Speicherung (Beispiele)

In Verbindung stehende Artikel

Mehr sehen