改编：html canvas 画心电图网格

最新推荐文章于 2024-06-06 10:14:32 发布

置顶阿甘在路上

最新推荐文章于 2024-06-06 10:14:32 发布

阅读量2.2k

点赞数 3

分类专栏： js 文章标签： ecg canva s网格

本文链接：https://blog.csdn.net/getmylost/article/details/52597277

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

改编自：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>

阿甘在路上

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
改编：html canvas 画心电图网格

改编自：http://blog.csdn.net/yc1022/article/details/40094775The ECG waveform function drawGrid(){var c_canvas1 = document.getElementById("ecg1");var context1 = c_canvas1.getContext
复制链接

扫一扫