HTML Canvas 上的绘图
使用 JavaScript 在 Canvas 上绘图
Canvas 上的绘图是通过 JavaScript 完成的。
Canvas 最初是空白的。要显示内容，需要一个脚本来访问渲染上下文并在其上进行绘制。
以下示例在 Canvas 上绘制一个红色矩形，从位置 (0,0) 开始，宽度为 150，高度为 75
示例
<canvas id="myCanvas" width="200" height="100" style="border:1px solid black;">
</canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 75);
</script>
自己动手试一试 »
步骤 1：查找 Canvas 元素
首先，您必须找到 <canvas> 元素。
您可以使用 HTML DOM 方法 getElementById() 来访问 <canvas> 元素。
const canvas = document.getElementById("myCanvas");
步骤 2：创建绘图对象
其次，您需要一个用于 Canvas 的绘图对象。
getContext() 方法返回一个包含绘图工具（属性和方法）的对象。
const ctx = canvas.getContext("2d");
步骤 3：在 Canvas 上绘图
最后，您可以在 Canvas 上绘图。
使用 fillStyle 属性将填充颜色设置为红色。
ctx.fillStyle = "red";
fillStyle 属性可以是颜色、渐变或图案。默认的 fillStyle 是黑色。
fillRect(x, y, width, height) 方法使用填充样式颜色在 Canvas 上绘制矩形。
ctx.fillRect(0, 0, 150, 75);
