Canvas API 提供了通过 JS + HTML来绘制图形的方式，主要聚焦于 2D 图形，用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

绘制步骤：

1、首先需要获取到DOM，获取方式如下举例几种

• 直接通过 document.getElementById 获取

• vue2 通过给标签设置 ref 属性，然后 this.$refs 获取

• vue3 通过绑定 ref 获取，即声明一个 ref 参数绑定

2、通过使用它的 getContext() 方法来访问绘画上下文，一般为 2d

const ctx = canvas.getContext("2d")

3、通过上下文实例来调用 API 绘制 Canvas

ctx.fillStyle = "#eee"
ctx.fillRect(20, 20, 100, 100)

API 主要形状、样式颜色、文本、图片、动画、像素操作等方面，具体使用可查

fillStyle - 设置图形的填充颜色
strokeStyle - 设置图形轮廓的填充颜色
fillRect(x, y, width, height) - 绘制一个填充的矩形
strokeRect(x, y, width, height) - 绘制一个矩形边框
clearRect(x, y, width, height) - 清除指定矩形区域，让清除部分完全透明