Shulou(Shulou.com)06/02 Report--

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)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.