h5的canvas绘制方格

时间:2019-09-24
本文章向大家介绍h5的canvas绘制方格,主要包括h5的canvas绘制方格使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

两个循环绘制

<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