h5的canvas绘制方格

Posted sandraryan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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();

效果同上??

以上是关于h5的canvas绘制方格的主要内容,如果未能解决你的问题,请参考以下文章

解决用H5 Canvas绘制的图片或文字在高清屏下模糊的问题

h5 Canvas矩形的绘制

H5画布 canvas 入门到精通 _ 第一部分(canvas简介绘制圆形/矩形案例饼状图绘制)

H5之canvas-绘制动态时钟

H5 canvas绘制出现模糊的问题

createjs 绘制圆形图片