HTML5Canvas属性设置全解析

HTML5 Canvas看似简单，实则暗藏诸多“静默陷阱”：从DOM未就绪导致getContext()返回null、宽高属性与CSS尺寸混淆引发的图像模糊，到跨域图片污染致使toDataURL()导出黑图或空白，再到drawImage()参数顺序错乱和坐标系理解偏差——这些不报错却让渲染结果严重失真的细节，恰恰是前端开发者踩坑最多、调试最耗时的关键所在。

canvas.getContext() 返回 null 怎么办

直接调用 getContext() 却拿到 null，基本等于 canvas 元素没准备好或类型不支持。最常见的是 DOM 尚未加载完成就执行 JS，或者传了错误的上下文类型（比如写成 "2dcontext" 或 "webgl2" 但浏览器不支持）。

• 确保脚本在 标签之后执行，或包裹在 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 都没有。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML5Canvas属性设置全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。