How to use canvas to draw electrocardiogram in html5
This article mainly introduces the relevant knowledge of "how to use canvas to draw ECG in html5". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use canvas to draw ECG in html5" can help you solve the problem.
Train of thought:
1. Simulation points (if you have real data, it is to transform the data into coordinate points corresponding to canvas)
The point to pay attention to when simulating a point is that the high part needs to be symmetrical and random up and down in order to look good.
two。 Draw a line
Drawing lines requires attention to the process of moving at a uniform speed.
For example, from point A to point B, not simply from point A to point B, but from point A to point A1. Finally, go to B (this piece is more difficult to move proportionally)
3. Some effects of drawing lines, such as adding shadows (here you can play freely) specific code
Html,body {width: 100%; height: 100%; margin: 0;} canvas {background: # 000; width: 100%; height: 100% } 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 (xPowery); 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 Number.isInteger 2; if (Number.isInteger (_ y)) {drawY + = Math.random () * 180mm 30 } else {drawY-= Math.random () * 180mm 30;} flag = true;} cDrawX = Math.random () * 40mm 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; iTunes; cc (); return;} if (y > hei/2) {if (reY > = y) {reX = x; reY = y; iSum + Cc (); return;}} else if (y < hei/2) {if (reY)
