3分钟教你绘制一个围棋棋盘

代数狂人

已于 2023-03-29 08:05:58 修改

阅读量3.4k

点赞数

分类专栏： html5 文章标签： html5 前端 html

于 2022-01-05 23:00:45 首次发布

本文链接：https://blog.csdn.net/baidu_38495508/article/details/122333908

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

围棋棋盘横竖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函数用来画线。