详细分析Canvas基本知识（以Vue3为基础）

1. 基本知识

以下是关于 Canvas 的基本知识和对应 API 的详细分析，以表格形式呈现，并附上多个可以直接执行的 Demo 示例

Canvas 是一个 HTML 元素，允许使用 JavaScript 动态绘制图形和动画
Canvas 提供了一组 API，使开发者可以直接在浏览器中进行图形绘制

API	描述	效果示例
getContext(‘2d’)	获取 2D 绘图上下文	在 Canvas 上绘制 2D 图形
fillRect(x, y, width, height)	绘制填充矩形	绘制一个蓝色矩形
strokeRect(x, y, width, height)	绘制矩形边框	绘制一个红色边框的矩形
clearRect(x, y, width, height)	清空指定区域	清空矩形区域
fillStyle	设置填充颜色	影响后续填充图形的颜色
strokeStyle	设置描边颜色	影响后续描边图形的颜色
begin