canvas.getContext()返回null需检查DOM加载时机和上下文类型是否支持；canvas宽高属性与CSS尺寸不一致会导致模糊；toDataURL()空白或黑图多因跨域污染；drawImage()参数顺序及坐标系易出错。
canvas.getContext() 返回 null 怎么办
直接调用 getContext() 却拿到 null，基本等于 canvas 元素没准备好或类型不支持。最常见的是 DOM 尚未加载完成就执行 JS，或者传了错误的上下文类型（比如写成 "2dcontext" 或 "webgl2" 但浏览器不支持）。
- 确保脚本在
<canvas></canvas>标签之后执行，或包裹在DOMContentLoaded里 -
getContext("2d")是唯一广泛兼容的值；getContext("webgl")需检查返回值是否为null，再降级处理 - 部分旧 Android WebView 对
getContext("webgl")返回null，但实际支持 —— 可加简单绘制测试兜底
canvas.width / height 和 style.width / height 混用导致模糊
这是最常被忽略的像素失真根源：canvas 的 width 和 height 属性控制**绘图缓冲区分辨率**，而 CSS 的 style.width 控制**显示尺寸**。两者不一致时，浏览器会缩放整个位图，文字、线条全变糊。
- 想让 canvas 清晰显示 800×600 像素内容？设
canvas.width = 800、canvas.height = 600，再用 CSS 设style.width = "800px"、style.height = "600px" - 响应式场景下，先读取
canvas.clientWidth和canvas.clientHeight，再等比赋给canvas.width/canvas.height，最后重绘 - 别用
%或vw直接设width/height属性 —— 这是 HTML 属性，只接受纯数字，不是 CSS
toDataURL() 导出空白或黑图
调用 toDataURL() 得到透明图、黑图或空字符串，大概率是跨域图像污染了 canvas。哪怕图片来自同域，如果用了 CORS 策略（比如 GitHub Pages 图片），也必须显式声明 crossOrigin。
- 加载图片前务必设置
img.crossOrigin = "anonymous"，否则 canvas 被标记为“污染”，导出受限 - 服务端需返回
Access-Control-Allow-Origin: *（或对应域名），否则crossOrigin无效 - 本地文件（
file://协议）下所有图片默认跨域失败，toDataURL()必然报错或返回空 —— 开发时用本地服务器（如python3 -m http.server）
drawImage() 参数顺序和坐标系容易搞反
drawImage() 有 3 种参数签名，最容易错的是「源图裁剪 + 目标定位」那组：它要先写源图的 sx, sy, sWidth, sHeight，再写目标画布上的 dx, dy, dWidth, dHeight。新手常把前四个当成目标位置，结果图偏移或拉伸异常。
立即学习“前端免费学习笔记（深入）”；
- 最简用法：
ctx.drawImage(img, dx, dy)—— 把整张图左上角贴到 (dx, dy) - 想截取原图一部分放大贴到画布：
ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) - canvas 坐标原点在左上角，y 轴向下增长 —— 这和数学坐标系相反，翻转图像时容易绕晕
- 对高清屏（devicePixelRatio > 1），记得用
ctx.scale(ratio, ratio)缩放整个绘图上下文，而不是手动乘 ratio
canvas 的坑不在 API 多难，而在那些不报错却悄悄失效的细节：DOM 时机、像素比、跨域策略、坐标系方向……改一个参数可能全图变样，但控制台连 warning 都没有。
