1. 准备画布
🖌️
宫廷画师：
"陛下，首先我们需要一块干净的画布。<canvas> 标签就是您的画板，但它本身只是个空框框，真正的魔法在于 JavaScript。"
在 HTML 中放置一个画布非常简单：
<canvas id="myCanvas" width="200" height="100"></canvas>
注意：默认情况下，画布是透明的。为了看清楚它在哪，我们通常会给它加个边框。
2. 拿起画笔 (Context)
光有画布不行，还得有画笔。在 JS 中，这个画笔叫做 Context (上下文)。
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
🧙♂️
魔法师提示：
"目前 Web 主要使用 2d 上下文。如果你想要 3D 效果，那是 WebGL 的领域，那里有恶龙（更复杂），以后再去探险吧。"
3. 绘制图形
让我们来画点什么吧！点击下面的按钮，看看代码是如何变成图形的。
🎨 矩形代码
ctx.fillStyle = "#ff0000";
ctx.fillRect(0, 0, 150, 75);
🎨 圆形代码
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();