绘制心电图,首先就要绘制表格
先贴出html代码 :
canvas id="ecg" width="751px" height="751px" ></canvas>
然后是绘制表格的函数,此表格包含大中小三种格子,分别对应三种函数:
function drawSmallGrid(c_canvas){
var context = c_canvas.getContext("2d");
context.strokeStyle = "#f1dedf";
context.strokeWidth=1;
context.beginPath();
for (var x = 0.5; x < 751; x += 3) {
context.moveTo(x, 0);
context.lineTo(x, 751);
context.stroke();
}
for (var y = 0.5; y < 751; y += 3) {
context.moveTo(0, y);
context.lineTo(751, y);
context.stroke();
}
context.closePath();
}
function drawMediumGrid(c_canvas){
var context = c_canvas.getContext("2d");
context.strokeStyle = "#f0adaa";
context.strokeWidth=1;
context.beginPath();
for (var x = 0.5; x < 751; x += 15) {
context.moveTo(x, 0);
context.lineTo(x, 751);
context.stroke();
};
for (var y = 0.5; y < 751; y += 15) {
context.moveTo(0, y);
context.lineTo(751, y);
context.stroke();
};
context.closePath();
}
function drawBigGrid(c_canvas){
var context = c_canvas.getContext("2d");
context.strokeStyle = "#e0514b";
context.strokeWidth=1;
context.beginPath();
for (var x = 0.5; x < 751; x += 75) {
context.moveTo(x, 0);
context.lineTo(x, 751);
context.stroke();
};
for (var y = 0.5; y < 751; y += 75) {
context.moveTo(0, y);
context.lineTo(751, y);
context.stroke();
};
context.closePath();
}
然后是绘制心电图的函数:
function drawLine(c_canvas) {
var ctx = c_canvas.getContext('2d');
ctx.strokeStyle = "#000";
ctx.strokeWidth = 1;
ctx.beginPath();
ctx.moveTo(0.5, 300);
ctx.lineTo(90, 300)
for(var x = 5; x < 35; x++) {
var num = Math.random() * 5 + 5; // 5-10
// 基数为正,偶数为负
if(x % 2 === 0) {
num = -num;
}
ctx.lineTo(x * 20, num * 20 +300)
}
ctx.lineTo(700, 300)
ctx.lineTo(750, 300)
ctx.stroke();
ctx.closePath();
}
最后一起调用这些函数:
(function draw(){
var c_canvas = document.getElementById("ecg");
drawSmallGrid(c_canvas);
drawMediumGrid(c_canvas)
drawBigGrid(c_canvas);
drawLine(c_canvas);
})();
神奇的心电图就这样出来了