h5的canvas绘制方格（边框随即色）

落日映苍穹つ 2023-06-05 08:11 160阅读 0赞

[文章地址 https://www.cnblogs.com/sandraryan/][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>

效果图

![1645790-20190924112210829-798241831.png][]

代码优化：

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

[https_www.cnblogs.com_sandraryan]: https://www.cnblogs.com/sandraryan/
[1645790-20190924112210829-798241831.png]: /images/20230601/f8e600c75cf04fcb8a6e750240e37962.png