Este artículo presenta el código de muestra para usar Canvas para dibujar un electrocardiograma y lo comparte con todos. Los detalles son los siguientes:
Representación:
Idea:
1. Simule puntos (si tiene datos reales, transforme los datos en puntos de coordenadas correspondientes al lienzo)
Lo importante a tener en cuenta al simular puntos es que las partes elevadas deben ser simétricas y deben aparecer arriba y abajo aleatoriamente para que se vean bien.
2. Dibuja líneas
Al dibujar líneas, debes prestar atención al proceso de movimiento a velocidad constante.
Por ejemplo, del punto A al punto B, no es simplemente de A a B, sino del punto A a A1, A2... y finalmente a B (es más difícil mover esta zona en proporción)
3. Algunos efectos del dibujo lineal, como agregar sombras (puedes usarlo libremente aquí) código específico
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Electrocardiograma</title> <meta name=viewport content=width=dispositivo-ancho, inicial-escala=1, usuario -escalable=no> <estilo> html,cuerpo{ ancho: 100%; alto: 100%; margen: } lienzo{ fondo: #000; 100%; altura: 100%; } </style> </head> <body> <div id=canvas> <canvas id=canvas> </div> <script> var can = document.getElementById( 'puede'), pan, índice = 0, bandera = verdadero, wid = document.body.clientWidth, hei = document.body.clientHeight, x = 0, y = hei/2, dibujarX = 0, dibujarY = hei/2, dibujarXY = [], cDrawX = 0, i = 0, reX = 0, reY = 0; start() función start(){ can.height = hei; can.width = ancho; pan = can.getContext(2d); pan.strokeStyle = blanco; pan.lineJoin = redondo; pan.shadowColor = #228DFF; pan.shadowOffsetX = 0; pan.shadowOffsetY = 0; pan.shadowBlur = 20; pan.moveTo(x,y); 1); }; función dibujarXYS(){ si(drawX > wid){ }else{ si(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 } bandera = verdadero; cDrawX = Math.random()*40+15; }else{ dibujarY = hei/2; } dibujarX += cDrawX; dibujarXY.push({ x : dibujarX, y : dibujarXYS() } } función mover (){ var x = dibujarXY[i].x, y = dibujarXY[i].y si(reX >= x - 1){ reX = x; reY = y; } }else if(y < hei/2){ if(reY <= y){ reX = x; reY = y(); reX = x; reY = y; i++; cc(); retorno; } reX += 1; si(y == hei/2){ reY = }else{ var c = Math.abs((drawXY) [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; reY = dibujarXY[i-1].y + _yt; } } cc() } función cc(){ si(i == dibujarXY.length){ pan.closePath(); clearInterval(índice); índice = 0; y = hei/2; bandera = verdadero; }else{ pan.lineTo(reX, reY()); ; } } </script></body></html>Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.