html绘制波形图,Html5 canvas 绘制心电波形图

ecg.png

pic.png

仅供参考

.boack {

position: absolute;

left: 0px;

top: 10px;

width: 800px;

height: 300px;

}

var canvas = document.getElementById("background");

var width = canvas.width;

var height = canvas.height;

var ctx = canvas.getContext("2d");

var grid_width = 5; // 每一个小网格的宽高

var hLineNum = parseInt(height / grid_width); // 横线个数

var vLineNum = parseInt(width / grid_width); // 竖线个数

var x_start = grid_width * 5; // X起点，从第二个大格子开始画

var lineCanvas = document.getElementById("line");

var lineCtx = lineCanvas.getContext("2d");

lineCtx.lineWidth = 2;

lineCtx.strokeStyle = "#0f0";

console.log(hLineNum);

console.log(vLineNum);

function drawGrid() {

ctx.beginPath();

ctx.lineWidth = 1;

ctx.strokeStyle = "#ffbebe";

for (let i = 0; i < hLineNum; i++) {

if (i == 0 || i % 5 != 0) {

ctx.move