两个循环绘制
<body>
<canvas id="cv" width="800" height="500"></canvas>
<script>
var cv = document.querySelector(‘#cv‘);
var ctx = cv.getContext(‘2d‘);
ctx.beginPath();
// 绘制水平线，起始点x坐标都为0，结束点x坐标都为宽度
// y坐标从50开始，每次累加50
ctx.lineWidth = .2;
for(var i = 1; i < 500/50; i++){
ctx.moveTo(0,i*50);
ctx.lineTo(800,i*50);
}
ctx.stroke();
// 竖直方向，起始点y坐标都是0，终止点y都是高度，累加50
ctx.beginPath();
for(var j = 0; j < 800/50; j++){
ctx.moveTo(50*j,0);
ctx.lineTo(50*j,500);
}
ctx.stroke();
</script>
</body>
效果图
代码优化：
var cv = document.querySelector(‘#cv‘);
var ctx = cv.getContext(‘2d‘);
ctx.beginPath();
for(var i = 0; i < 800/50; i++){
// 竖直线
ctx.moveTo(50*i,0);
ctx.lineTo(50*i,500);
// 水平线
// 如果水平线绘制完毕，就没必要继续嗲用moveTo 和lineTo
if(i> 500/50){
continue;
}
ctx.moveTo(0,i*50);
ctx.lineTo(800,i*50);
}
ctx.stroke();
效果同上??
原文地址：https://www.cnblogs.com/sandraryan/p/11577399.html
时间： 2024-10-26 17:04:47