Canvas绘图需先创建画布并正确获取2D上下文，HTML中width/height必须用属性设置而非CSS，JavaScript须等DOM就绪后获取元素和ctx，小程序还需按dpr缩放画布并调用scale。
Canvas绘图必须先有画布，再拿到“画笔”——也就是2D绘图上下文（context），缺一不可。关键不是写了<canvas>标签就完事，而是要确保尺寸正确、DOM就绪、上下文获取无误。
HTML中声明画布，宽高必须用属性设置
在HTML里添加<canvas>标签时，width和height必须作为HTML属性写在标签内，比如：
<canvas id="myCanvas" width="500" height="300"></canvas>
不能靠CSS设置宽高，否则画布会拉伸变形——这是最常踩的坑。
建议加上备用文字，提示不支持Canvas的用户：
- 在
<canvas>标签内部写提示语，如“您的浏览器不支持Canvas” - 加个边框样式方便调试：
style="border:1px solid #ccc;"
JavaScript中安全获取Canvas元素和Context
必须等DOM加载完成后再操作，否则getElementById可能返回null。推荐做法：
- 把脚本放在
</body>前，或监听DOMContentLoaded事件 - 先获取元素，再检查是否支持Canvas：
if (!canvas.getContext) { ... } - 调用
getContext('2d')获取上下文，这是后续所有绘图操作的唯一入口
示例代码片段：
const canvas = document.getElementById('myCanvas');<br>const ctx = canvas.getContext('2d');
小程序环境（微信/QQ）需额外处理像素比
小程序里Canvas默认是逻辑像素，直接绘制会模糊。必须按设备像素比（dpr）缩放画布实际尺寸：
- 用
createSelectorQuery获取画布节点和真实宽高 - 读取
pixelRatio，设置canvas.width和canvas.height为逻辑宽高 × dpr - 再对上下文调用
ctx.scale(dpr, dpr)，让绘图坐标与逻辑坐标对齐
漏掉这一步，图形会发虚或错位。
确认上下文可用，避免静默失败
拿到ctx后别急着画，先简单验证是否有效：
- 打印
console.log(ctx)，看是否为对象而非null - 执行一句
ctx.fillRect(0,0,10,10)，观察左上角是否有小方块出现 - 如果没反应，回头检查ID拼写、脚本执行时机、浏览器兼容性
上下文一旦获取失败，后面所有绘图方法都不起作用，但不会报错，容易误判。
