Canvas绘制网格（心电图，坐标纸等可用） |
您所在的位置：网站首页 › 坐标纸的使用方法初一 › Canvas绘制网格（心电图，坐标纸等可用） |
Canvas绘制网格（心电图，坐标纸等可用）
|
---恢复内容开始--- 本篇文档是Canvas绘制心电图的第一个部分，想了解详情的可以关注后学习交流。 心电图的最底层需要一个网状底层，来方便进行数据的测量。 为了大多数网友考虑，先绘制比较复杂的一种，再绘制我之前心电图文档同款 一、白底分大、中、小三个区域的网格 展示：
1、首先是HTML部分 1 DOCTYPE html> 2 3 4 5 6 7 8 9 10 11 12 网格 13 14 15 16 17 18 19 20 21HTML创建Canvas画布，并且定义画布大小。
2、使用JS绘制网格 2.1定义所需变量名 1 var ctx;2.2编写网格绘制总函数 所需要的高级网格需要三种大小的网格，分别为大、中、小，这三种网格需要被同时调用执行，故专写一个函数来共同调用三种大小的绘制函数。 1 /**绘制网格总函数 2 * 分别绘制 3 * drawSmallGrid小网格 4 * drawMediumGrid中网格 5 * drawBigGrid大网格 6 */ 7 function drawgrid() { 8 var c_canvas = document.getElementById("grids"); 9 drawSmallGrid(c_canvas); 10 drawMediumGrid(c_canvas); 11 drawBigGrid(c_canvas); 12 return; 13 }2.3编写小网格函数 众所周知，两点一线的道理canvas也受用，但是为了方便起见，网格类型的依靠循环来写，具体代码如下： 1 /**绘制小网格 2 * 第一个for语句循环出纵向小方格细线条，间距为X轴方向3像素 3 * 第二个for语句循环出横向小方格细线条，间距为Y轴方向3像素 4 */ 5 function drawSmallGrid(c_canvas) { 6 ctx = c_canvas.getContext("2d"); 7 ctx.strokeStyle = "#f1dedf"; 8 ctx.strokeWidth = 1; 9 ctx.beginPath(); 10 for (var x = 0.5; x < 750; x += 3) { 11 ctx.moveTo(x, 0); 12 ctx.lineTo(x, 750); 13 ctx.stroke(); 14 } 15 for (var y = 0.5; y < 750; y += 3) { 16 ctx.moveTo(0, y); 17 ctx.lineTo(750, y); 18 ctx.stroke(); 19 } 20 ctx.closePath(); 21 return; 22 }2.4编写中网格函数 根据小网格，同理可绘制中型网格 1 /**绘制中型网格 2 * 第一个for语句循环出纵向中方格中线条，间距为X轴方向15像素，小网格的5倍 3 * 第二个for语句循环出横向中方格中线条，间距为Y轴方向15像素，小网格的5倍 4 */ 5 function drawMediumGrid(c_canvas){ 6 ctx = c_canvas.getContext("2d"); 7 ctx.strokeStyle="#fdbeb9"; 8 ctx.strokeWidth = 2 9 //宽度是小网格的2倍 10 ctx.beginPath(); 11 for(var x=0.5;x |
【本文地址】