So erzielen Sie mit HTML5-Canvas den Bewegungseffekt eines Elektrokardiogramms-H5-Tutorial-php.cn

So erzielen Sie mit HTML5-Canvas den Bewegungseffekt eines Elektrokardiogramms

不言

Freigeben： 2018-09-08 15:58:50

Original

3273 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!