在 canvas 中绘制图形需要掌握以下几个关键词：
canvas：HTML5 中新增的标签，用于在网页中绘制图形。
getContext()：canvas 对象的方法，用于获取绘图环境，其中参数可选值为 "2d" 或 "webgl"，分别对应二维和三维绘图环境。
绘制形状：canvas 中可以使用多种方法绘制形状，如绘制矩形（fillRect()和strokeRect()）、绘制圆形（arc()）、绘制线条（moveTo()和lineTo()）等。
样式设置：在 canvas 中可以设置线条颜色（strokeStyle）、填充颜色（fillStyle）、线条宽度（lineWidth）等样式。
下面是在 canvas 中绘制一个矩形的示例代码：
<canvas id="myCanvas"></canvas>const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red"; // 设置填充颜色为红色
ctx.fillRect(10, 10, 50, 50); // 绘制矩形，左上角坐标为 (10, 10)，宽度为 50，高度为 50值得注意的是，canvas 中绘制的图形都是基于当前绘图环境的，因此在绘制不同形状时，需要及时重置绘图环境，以免样式互相影响。