使用canvas画小方块_canvas 画方块-优快云博客

本文链接：https://blog.youkuaiyun.com/Sunraiseprice/article/details/121316378

<!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>