改编自:http://blog.csdn.net/yc1022/article/details/40094775
<!DOCTYPE html>
<html><head>
<title>The ECG waveform</title>
</head>
<canvas id="ecg1" width="600px" height="600px" ></canvas>
<canvas id="ecg2" width="750px" height="750px" ></canvas>
<script type="text/javascript">
function drawGrid()
{
var c_canvas1 = document.getElementById("ecg1");
var context1 = c_canvas1.getContext("2d");
drawSmallGrid(context1, 450, 450);
drawMediumGrid(context1, 450, 450);
drawBigGrid(context1, 450, 450);
var c_canvas2 = document.getElementById("ecg2");
var context2 = c_canvas2.getContext("2d");
drawSmallGrid(context2, c_canvas2.width, c_canvas2.height);
drawMediumGrid(context2, c_canvas2.width, c_canvas2.height);
drawBigGrid(context2, c_canvas2.width, c_canvas2.height);
return;
}
function drawContextGrid(context, width, height, xInterval, yInterval)
{
context.beginPath();
for (var x = 0.5; x < width; x += xInterval)
{
context.moveTo(x, 0);
context.lineTo(x, height);
context.stroke();
}
for (var y = 0.5; y < height; y += yInterval)
{
context.moveTo(0, y);
context.lineTo(width, y);
context.stroke();
}
context.closePath();
return;
}
function drawSmallGrid(context, width, height)
{
context.strokeStyle = "#f1dedf";
context.strokeWidth=1;
drawContextGrid(context, width, height, 3, 3);
return;
}
function drawMediumGrid(context, width, height)
{
context.strokeStyle = "#f0adaa";
context.strokeWidth=1;
drawContextGrid(context, width, height, 15, 15);
return;
}
function drawBigGrid(context, width, height)
{
context.strokeStyle = "#e0514b";
context.strokeWidth=1;
drawContextGrid(context, width, height, 75, 75);
return;
}
drawGrid();
</script></html>