Heim > Artikel > Web-Frontend > Beispielcode zum Zeichnen eines Elektrokardiogramms mit Canvas

Beispielcode zum Zeichnen eines Elektrokardiogramms mit Canvas

青灯夜游nach vorne: 2018-10-09 15:33:112534Durchsuche

Dieser Artikel stellt hauptsächlich die relevanten Informationen zum Zeichnen eines Elektrokardiogramms mit Canvas vor. Ich hoffe, dass er für Sie hilfreich ist.

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:

Rendering:

Idee:

1. Punkte simulieren (wenn Sie echte Daten haben, dann wandeln Sie die Daten in Koordinatenpunkte um, die der Leinwand entsprechen)

Die Punkte, die Sie bei der Simulation von Punkten beachten sollten Die erhabenen Teile müssen symmetrisch sein und um gut auszusehen, sollten sie nach oben und unten zufällig erscheinen

2. Linien zeichnen

Beim Zeichnen von Linien müssen Sie auf den Bewegungsprozess achten mit konstanter Geschwindigkeit.

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 Zeichnens von Linien, wie das Hinzufügen von Schatten (Sie können es hier frei verwenden) spezifischer Code

<!DOCTYPE html>
 <html lang="en">
 <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>
 <p id="canvas">
     <canvas id="can"></canvas>
 </p>
 <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>

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, Ich hoffe, dass es für das Lernen aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter Html5-Video-Tutorial!

Verwandte Empfehlungen:

PHP-Video-Tutorial zum Gemeinwohltraining

HTML5-Grafik-Tutorial

HTML5 Online-Handbuch

Das obige ist der detaillierte Inhalt vonBeispielcode zum Zeichnen eines Elektrokardiogramms mit Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So verwenden Sie HTML5-Figuren und FigcaptionNächster Artikel：So verwenden Sie HTML5-Figuren und Figcaption

In Verbindung stehende Artikel

Mehr sehen