必须先调用 getContext('2d') 获取 2D 绘图上下文才能绘图，否则 fillRect 等方法静默失败；需确保 DOM 加载完成、canvas 元素存在且参数字符串为小写 '2d'。
怎么获取 canvas 的 2D 绘图上下文
必须先调用 getContext('2d') 才能开始绘图，否则所有绘制方法都会静默失败。这个步骤不能省略，且只对 元素有效。
常见错误是直接在未获取上下文的 canvas 上调用 fillRect 或 beginPath，结果什么也不显示，控制台也无报错。
- 确保 DOM 已加载完成，比如放在
window.onload或DOMContentLoaded回调里 -
getContext('2d')返回null时，说明 canvas 尚未渲染或被移除，需检查元素是否存在 - 不支持
getContext('webgl')的旧浏览器不会影响 2D，但别传错字符串（如写成'2D'或'2d '）
如何画一个带边框的实心矩形
最基础的图形操作：用 fillRect 填充，用 strokeRect 描边，两者可独立使用，也可组合。
注意：fillStyle 和 strokeStyle 必须在调用绘制函数前设置，顺序不能颠倒。
立即学习“Java免费学习笔记（深入）”；
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#ff6b6b';
ctx.strokeStyle = '#4ecdc4';
ctx.lineWidth = 2;
ctx.fillRect(50, 30, 120, 80); // x, y, width, height
ctx.strokeRect(50, 30, 120, 80); // 同样坐标和尺寸
为什么 drawImage 不显示图片
绝大多数情况不是 API 写错了，而是图片还没加载完成就调用了 drawImage。Canvas 不会等待图片加载，它只管“此刻有没有像素数据”。
正确做法是监听图片的 load 事件，再执行绘制。
- 不要用本地
file://协议直接打开 HTML——现代浏览器会因 CORS 拒绝加载本地图片 - 如果图片来自跨域服务，需设置
img.crossOrigin = 'anonymous'，且服务端返回合法 CORS 头 -
drawImage有 3 种参数形式，最常用的是drawImage(img, dx, dy)和drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)，缩放裁剪时容易搞混源/目标坐标
路径绘制后为什么不显示
调用 beginPath() 只是清空当前路径，并不自动触发渲染；真正绘制靠的是 fill()、stroke() 或 clip()。漏掉这两步，路径就只是内存里的坐标点集合。
另外，closePath() 不是必需的，但它会影响填充效果（尤其是非凸多边形），而 stroke() 对是否闭合不敏感。
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 50);
ctx.lineTo(300, 100);
// 没有 closePath，fill 仍能形成三角形（自动闭合）
ctx.fillStyle = 'rgba(100, 150, 255, 0.7)';
ctx.fill(); // 必须有这一行
ctx.beginPath();
ctx.arc(150, 150, 40, 0, Math.PI * 2);
ctx.strokeStyle = '#333';
ctx.lineWidth = 3;
ctx.stroke(); // 必须有这一行
路径对象不可复用，每次绘制新图形都得重新 beginPath()，否则旧路径会叠加进新路径里，导致意外描边或填充。
