围棋棋盘横竖19条线,如果每一个的大小是20像素X20像素那么棋盘的宽度和高度都应该是20X18(360像素),因为横竖都是18个方格。
今天我们用HTML的画布来绘制棋盘,画布大小400像素X400像素。
<canvas id="canvas" width="400" height="400"></canvas>
<script>
let canv=document.getElementById("canvas");
let context=canv.getContext("2d");
context.beginPath();
for(let i=0;i<19;i++){
context.moveTo(10+i*20,10);
context.lineTo(10+i*20,370);
context.moveTo(10,10+i*20);
context.lineTo(370,10+i*20);
}
context.stroke();
</script>
代码使用方法:
在电脑桌面新建一个文本文档(txt),把代码复制进文档,保存,把文档后缀 .txt 改成 .html 然后左键双击文件运行。
这里的知识点无非就是一个for循环,循环19次,每次画一条横线和竖线,棋盘在(10,10)开始,在(370,370)结束,具体细节可看代码颅内思考!
beginPath和stroke函数用来画线。