This article introduces the sample code for using canvas to draw an electrocardiogram and shares it with everyone. The details are as follows:
Rendering:
Idea:
1. Simulate points (if you have real data, then transform the data into coordinate points corresponding to the canvas)
The important thing to note when simulating points is that the raised parts need to be symmetrical and have to appear up and down randomly in order to look good.
2. Draw lines
When drawing lines, you need to pay attention to the process of moving at a constant speed.
For example, from point A to point B, it is not simply from A to B, but from point A to A1, A2...and finally to B (it is more difficult to move this area in proportion)
3. Some effects of line drawing, such as adding shadows (you can use it freely here) specific code
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Electrocardiogram</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( '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; 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>The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.