html canvas 画心电图网格

来源：互联网发布：js typeof instanceof 编辑：程序博客网时间：2024/04/27 01:07

<!DOCTYPE html>
<html>
<head>
<title>StackOverflow test bed</title>

</head>
<canvas id="ecg" width="750px" height="750px" ></canvas>
<script type="text/javascript">


function drawGrid(){
var c_canvas = document.getElementById("ecg");
drawSmallGrid(c_canvas);
drawMediumGrid(c_canvas)
drawBigGrid(c_canvas);
return;
}

function drawSmallGrid(c_canvas){
var context = c_canvas.getContext("2d");
context.strokeStyle = "#f1dedf";
context.strokeWidth=1;
context.beginPath();
for (var x = 0.5; x < 750; x += 3) {
context.moveTo(x, 0);
context.lineTo(x, 750);
context.stroke();
}

for (var y = 0.5; y < 750; y += 3) {
context.moveTo(0, y);
context.lineTo(750, y);
context.stroke();
}
context.closePath();
return;
}

function drawMediumGrid(c_canvas){
var context = c_canvas.getContext("2d");
context.strokeStyle = "#f0adaa";
context.strokeWidth=1;
context.beginPath();
for (var x = 0.5; x < 750; x += 15) {
context.moveTo(x, 0);
context.lineTo(x, 750);
context.stroke();
};

for (var y = 0.5; y < 750; y += 15) {
context.moveTo(0, y);
context.lineTo(750, y);

context.stroke();
};
context.closePath();
return;
}

function drawBigGrid(c_canvas){
var context = c_canvas.getContext("2d");
context.strokeStyle = "#e0514b";
context.strokeWidth=1;
context.beginPath();
for (var x = 0.5; x < 750; x += 75) {
context.moveTo(x, 0);
context.lineTo(x, 750);
context.stroke();
};

for (var y = 0.5; y < 750; y += 75) {
context.moveTo(0, y);
context.lineTo(750, y);
context.stroke();
};
context.closePath();
return;
}

drawGrid()
</script>

</html>

1 0