Maison > interface Web > Tutoriel H5 > le corps du texte

Exemple de code pour dessiner un électrocardiogramme à l'aide d'un canevas

青灯夜游
Libérer: 2018-10-09 15:33:11
avant
2570 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur l'exemple de code pour dessiner un électrocardiogramme à l'aide d'un canevas. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Cet article présente l'exemple de code pour utiliser Canvas pour dessiner un électrocardiogramme et le partage avec tout le monde. Les détails sont les suivants :

Rendu :

Idée :

1. Simuler des points (si vous avez des données réelles, puis transformer les données en points de coordonnées correspondant au canevas)

Les points à noter lors de la simulation de points sont ceux-là. les parties surélevées doivent être symétriques et pour avoir une belle apparence, elles doivent apparaître de haut en bas de manière aléatoire

2. Tracer 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. Certains effets de dessin de lignes, tels que l'ajout d'ombres (vous pouvez l'utiliser librement ici) code spécifique

<!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>
Copier après la connexion
Résumé : Ce qui précède est tout le contenu de ceci. article, j'espère qu'il pourra être utile pour l'apprentissage de chacun. Pour plus de didacticiels connexes, veuillez visiter le

Tutoriel vidéo HTML5 !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Tutoriel graphique HTML5

Manuel HTML5 en ligne

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!

Étiquettes associées:
source:jb51.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!