使用canvas画小方块

2021-11-14 13:00:01 阅读：193 来源： 互联网

标签：canvas 小方块 ctx moveTo 300 step 使用 var

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #eee;
        }

        canvas {
            display: block;
            /* margin: 80px auto; */
            background-color: #fff;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = 600;
        canvas.height = 600;
        var canvasWidth = canvas.width;
        var canvasHeight = canvas.height;
        var step = 30;
        //一个方块的大小是30*30px
        /* 网格 */
        ctx.beginPath();
        for (var i = 1, iLen = canvasWidth / step; i < iLen; i++) {
            //画的是y轴
            ctx.moveTo(1 * step, 0);
            ctx.lineTo(1 * step, canvasHeight);
            //画的是x轴
            ctx.moveTo(0, 1 * step);
            ctx.lineTo(canvasHeight, 1 * step);
        }
        ctx.strokeStyle = '#efefef';
        ctx.stroke();

        /* 弓形 */
        // ctx.beginPath();
        // ctx.arc(300, 300, 150, 0, Math.PI * 0.6, false);
        // ctx.closePath();
        // ctx.strokeStyle = '#f40';
        // ctx.stroke();

        /* 扇形 */
        // ctx.beginPath();
        // ctx.moveTo(300, 300);
        // /* 起始点移到圆心 */
        // ctx.arc(300, 300, 150, Math.PI * -0.3, Math.PI, true);
        // // ctx.closePath();
        // ctx.strokeStyle = '#00f';
        // ctx.stroke();
    </script>
</body>

</html>

标签：canvas,小方块,ctx,moveTo,300,step,使用,var
来源： https://blog.csdn.net/Sunraiseprice/article/details/121316378

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用canvas画小方块