HTML5Canvas绘图基础教程详解

本文深入解析HTML5 Canvas开发中四大高频陷阱：getContext("2d")返回null的根源与排查要点、fillRect/strokeRect“黑块或隐形”的真实原因（颜色未设、坐标越界、CSS缩放失真）、drawImage图片不显示或错位的关键细节（加载时机、参数混淆、跨域限制），以及clearRect“清不干净”的隐秘诱因（区域遗漏、状态残留、高DPI适配缺失）；文章强调Canvas是即时模式绘图，不保存对象而只操作像素，所有问题几乎都源于上下文状态管理疏漏——只要动手前严守“确认ctx存在、图片已加载、坐标在界内、颜色已设置”四条铁律，就能避开八成新手坑。

Canvas getContext("2d") 返回 null 怎么办

调用 getContext("2d") 得到 null，说明 Canvas 元素没准备好，或者上下文类型写错了。最常见的是 DOM 节点还没加载完就执行 JS，或者 Canvas 标签本身缺失 width/height 属性（部分浏览器会拒绝初始化）。

• 确保脚本在 元素之后执行，或包裹在 DOMContentLoaded 里
• 检查 HTML 中 是否有闭合、拼写错误
• 显式设置 width 和 height 属性（不是 CSS 样式），例如：
• getContext("webgl") 或 getContext("2d") 大小写敏感，别写成 "2D" 或 "2d "（带空格）

fillRect 和 strokeRect 画出来是黑块或看不见

黑块通常是因为没设颜色；看不见则多因坐标超界、透明度为 0、或 canvas 像素比被缩放后失真。Canvas 绘图依赖当前上下文状态，不设颜色就用默认黑色填充、默认 1px 黑色描边——但若 fillStyle 是 "transparent" 或 "rgba(0,0,0,0)"，就会“画了等于没画”。

• 画前必须设置 ctx.fillStyle（填充）或 ctx.strokeStyle（描边），比如：ctx.fillStyle = "#f00"
• 确认坐标在 canvas 画布范围内：fillRect(0, 0, 100, 100) 是安全的；fillRect(-100, -100, 200, 200) 可能只显示四分之一
• 避免仅靠 CSS 缩放 canvas（如 style="width:400px;height:300px"），这会拉伸像素导致模糊甚至内容偏移；应直接改 width/height 属性

drawImage 图片不显示或位置错乱

drawImage 是最易出错的 API 之一：图片未加载完成就调用、参数顺序混淆、坐标系理解偏差都会导致白屏或错位。它有 3 种参数签名，传错数量或类型不会报错，只会静默失败。

• 务必等图片加载完成再绘图：img.onload = () => ctx.drawImage(img, 0, 0)；不要在 new Image() 后立刻调用
• 记住三参数形式是 drawImage(img, dx, dy)，五参数是 drawImage(img, sx, sy, sw, sh, dx, dy) ——中间五个是“源区域”，最后两个是“目标位置”，别把 sx 当成目标 x
• Canvas 坐标原点在左上角，y 向下增长；如果图片从顶部裁切异常，检查 sy 是否为负或超出图片高度
• 跨域图片（如 CDN 地址）需设置 img.crossOrigin = "anonymous"，否则 drawImage 会静默失败且无法读取像素

clearRect 清不干净或留残影

clearRect 只清指定矩形区域，不是重置整个 canvas 状态。所谓“清不干净”，往往是没覆盖全部区域，或清完又立刻用旧状态重绘——尤其是没重置 globalAlpha、transform 等上下文属性时。

• 清全屏用 ctx.clearRect(0, 0, canvas.width, canvas.height)，别漏掉 canvas.width/height 动态值
• 清除后若仍有残留，检查是否用了 save()/restore() 但没配对，或 transform 没重置（可用 setTransform(1,0,0,1,0,0) 强制还原）
• 动画循环中，clearRect 必须在每帧绘制前调用；如果先 draw 再 clear，上一帧就永远留在那里
• 高 DPI 屏幕下，若 canvas 的 width/height 未按 window.devicePixelRatio 缩放，clearRect 清的只是逻辑像素，物理像素仍可能残留

Canvas 不保存图形对象，只存像素；所有“状态”都靠上下文变量维持，而这些变量一旦设错或遗漏，问题就藏得深、复现难。动手前先确认 ctx 存在、图片加载完毕、坐标在界内、颜色已设置——这四件事卡住 80% 的新手问题。

到这里，我们也就讲完了《HTML5Canvas绘图基础教程详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于HTML5的知识点！