使用 Canvas 绘制图案

22 min read

  1. 编写 canvas 标签（注意指定宽高）

  2. 获取 canvas DOM 对象

  3. 获取 Canvas 对象

  4. 设置绘图属性

  5. 调用绘图 API

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <canvas id="canvas" width="600" height="600"></canvas>
        <script>
            const canvas = document.getElementById("canvas");
            const context = canvas.getContext("2d"); // 获取canvas对象
            context.fillStyle = "red"; // 填充色
            context.fillRect(0, 0, 50, 50); // 0 0 起点 50 50 代表 长宽

            context.beginPath();
            context.lineWidth = 1;
            context.strokeStyle = 'blue';
            context.moveTo(100, 100);
            context.lineTo(250, 250); // 绘制起点
            context.lineTo(0, 60); // 绘制终点
            context.stroke();

            context.beginPath();
            context.lineWidth = 2;
            context.strokeStyle = 'green';
            context.fillStyle = 'red';
            context.arc(400, 400, 50, 0, 2 * Math.PI);
            context.stroke();
            context.fill();
        </script>
    </body>
</html>