Cet article présente l'exemple de code permettant d'utiliser Canvas pour dessiner un électrocardiogramme et le partage avec tout le monde. Les détails sont les suivants :
Rendu :
Idée:
1. Simulez des points (si vous disposez de données réelles, transformez ensuite les données en points de coordonnées correspondant au canevas)
La chose importante à noter lors de la simulation de points est que les parties en relief doivent être symétriques et doivent apparaître de haut en bas de manière aléatoire pour avoir une belle apparence.
2. Tracez des lignes
Lorsque vous tracez des lignes, vous devez faire attention au processus de déplacement à vitesse constante.
Par exemple, du point A au point B, ce n'est pas simplement de A à B, mais du point A à A1, A2...et enfin à B (il est plus difficile de déplacer cette zone proportionnellement)
3. Certains effets du dessin au trait, comme l'ajout d'ombres (vous pouvez l'utiliser librement ici) du code spécifique
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Électrocardiogramme</title> <meta name=viewport content=width=device-width, initial-scale=1, user -scalable=no> <style> html,body{ largeur : 100 % ; hauteur : 100 % ; marge : 0 ; toile{ fond : #000 ; 100 % ; hauteur : 100 % ; } </style> </head> <body> <div id=canvas> <canvas id=can></canvas> </div> <script> var can = document.getElementById( 'can'), 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; function start(){ can.height = hei; can.width = wid; pan = can.getContext(2d); pan.strokeStyle = blanc pan.lineJoin = rond; pan.shadowColor = #228DFF; pan.shadowOffsetX = 0; pan.shadowOffsetY = 0; pan.shadowBlur = 20; pan.moveTo(x,y); 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; += Math.random()*180+30; }else{ drawY -= Math.random()*180+30 } flag = true } cDrawX = Math.random()*40+15; }else{ drawY = hei/2; } drawX += cDrawX.push({ x : drawX, y : drawY }); (){ var x = dessinerXY[i].x, y = dessinerXY[i].y si(reX >= x - 1){ reX = x; reY = i++; cc(); if(y > hei/2){ if(reY >= y){ reX = y++; } }else if(y < hei/2){ if(reY <= y){ reX = x; reY = i++; cc(); reX = x; reY = i++; cc(); return; reX += 1; reY = hei/2; [i].x-drawXY[i-1].x)/(drawXY[i].y-drawXY[i-1].y)); (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; flag = true i = 0; ; } } </script></body></html>Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.