文章地址 https://www.cnblogs.com/sandraryan/
兩個循環繪制
<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();
效果同上👆