Comment utiliser le canevas HTML5 pour obtenir l'effet mobile d'un électrocardiogramme-Tutoriel H5-php.cn

Comment utiliser le canevas HTML5 pour obtenir l'effet mobile d'un électrocardiogramme

不言

Libérer： 2018-09-08 15:58:50

original

3247 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser le canevas html5 pour obtenir l'effet de mouvement de l'électrocardiogramme. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Rendu :

Comment utiliser le canevas HTML5 pour obtenir leffet mobile dun électrocardiogramme

Idées :

1. Point de simulation (si vous avez des données réelles, c'est-à-dire pour transformer les données en points de coordonnées correspondant au canevas)

Ce à quoi vous devez faire attention lors de la simulation de points, c'est que les parties en relief doivent être symétriques et apparaître de haut en bas de manière aléatoire afin d'être belles

2. Tracez des lignes

Lorsque vous tracez des lignes, vous devez faire attention au processus de déplacement à vitesse constante.

Par exemple, d'un point A à un point B, il ne s'agit pas simplement de dessiner de A à B, mais du point A à A1, A2...et enfin vers B (c'est plus difficile de déplacer cette zone en proportion)

3. Quelques effets de dessin au trait, comme l'ajout d'ombres (vous pouvez l'utiliser librement ici)

Code spécifique

<!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>

Copier après la connexion

Recommandations associées :

Comment utiliser HTML5 Canvas pour créer des effets d'animation 3D

Démonstration du code graphique de l'effet d'animation HTML5 Canvas

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!