HTML Canvas 绘制
使用 JavaScript 在画布上绘图
在 HTML 画布上的所有绘图都必须使用 JavaScript 完成：
实例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
第 1 步：找到 Canvas 元素
首先，您必须找到 <canvas> 元素。
这是通过使用 HTML DOM 方法 getElementById() 完成的：
const canvas = document.getElementById("myCanvas");
第 2 步：创建绘图对象
其次，您需要一个画布绘图对象。
getContext() 是一个内置的 HTML 对象，它提供了用于绘图的属性和方法：
const ctx = canvas.getContext("2d");
第 3 步：在画布上绘图
最后，您可以在画布上绘图了。
将绘图对象的填充样式设置为红色：
ctx.fillStyle = "#FF0000";
fillStyle 属性可以是 CSS 颜色、渐变或图案。默认的 fillStyle 是黑色。
fillRect(x,y,width,height) 方法在画布上绘制一个矩形，使用填充样式进行填充：
ctx.fillRect(0, 0, 150, 75);