HTML Canvas宽高设置与绘图坐标解析

本文深入剖析了HTML Canvas中宽高设置与绘图坐标的底层机制，揭示了canvas.width/height（控制实际绘图缓冲区分辨率）与CSS style.width/height（仅控制显示缩放）的本质区别——二者不匹配将直接导致线条变粗、文字发虚、图像模糊、坐标错位等高频失真问题；文章不仅指出常见误区（如仅用CSS拉伸Canvas），更给出高分屏适配的正确范式：动态结合devicePixelRatio设置缓冲区尺寸、同步应用ctx.scale进行坐标系校准，并强调ResizeObserver响应式重绘时必须同步更新缓冲区、重置变换并清空重绘，确保在各种设备和屏幕方向下Canvas渲染精准、清晰、可靠。

canvas.width 和 canvas.height 是绘图缓冲区分辨率，不是 CSS 尺寸

直接在 HTML 里写 width="800" 或用 JS 赋值 canvas.width = 800，设置的是「绘图上下文的逻辑像素总数」；而 style.width = "800px" 只是告诉浏览器“把这个画布框拉到 800 像素宽”，不改变内部栅格。两者不一致时，浏览器会缩放整个位图——线条变粗、文字发虚、getImageData 返回的像素数对不上。

常见错误现象：

• ctx.lineWidth = 1 画出来像 2 像素宽
• 导出 PNG 时图像模糊或尺寸不对
• 响应式容器里 canvas 内容被压缩/拉伸变形

为什么不能只用 CSS 设置 canvas 尺寸

CSS 的 width 和 height 对 canvas 来说只是“显示层缩放”，不会重置绘图坐标系原点或改变 ctx 的像素密度。比如你写：

但没设 HTML 属性或 JS 赋值 width/height，那 canvas 实际缓冲区还是默认的 300×150，浏览器硬把它撑成满屏宽——结果就是所有绘制内容被拉伸失真。

正确做法始终是：

• 先确定目标显示尺寸（如父容器 clientWidth）
• 乘以 window.devicePixelRatio 得到高分屏所需缓冲区大小
• 赋给 canvas.width 和 canvas.height
• 再用 CSS 把 canvas 显示尺寸设为对应 CSS 像素（例如 style.width = "100%"）

canvas 绘图坐标系原点在左上角，缩放/平移会改变它

初始状态下，(0, 0) 是 canvas 左上角顶点，x 向右递增，y 向下递增。这个坐标系绑定在 canvas 缓冲区像素网格上，不受 CSS 缩放影响。

但一旦调用 ctx.scale(2, 2) 或 ctx.translate(50, 50)，后续所有绘制命令都基于新变换后的坐标系执行。容易忽略的点：

• ctx.scale(dpr, dpr) 必须在重设 width/height 后立即调用，否则坐标映射错位
• ctx.setTransform(1, 0, 0, 1, 0, 0) 可重置所有变换，比多次 save()/restore() 更轻量
• 使用 getBoundingClientRect() 获取鼠标位置时，需手动减去 canvas 左上角偏移再除以 DPR，才能对齐绘图坐标

响应式重绘必须同步更新 width/height + 重置 ctx 变换

监听 ResizeObserver 是目前最稳妥的方式。每次回调中不能只改 CSS 尺寸，必须：

• 读取父容器当前 clientWidth / clientHeight
• 计算目标缓冲区：canvas.width = Math.round(width * devicePixelRatio)
• 同理设置 canvas.height
• 调用 ctx.scale(devicePixelRatio, devicePixelRatio)
• 最后清空并重绘（注意：改 width 或 height 属性会自动清空画布）

漏掉 ctx.scale 这一步，高清屏上所有 fillRect、strokeText 都会变细一半；漏掉重绘，画布看起来是空的——因为缓冲区重置了，但没画新内容。

devicePixelRatio 不是静态值，iOS Safari 在横竖屏切换时可能变化，别缓存它。

理论要掌握，实操不能落！以上关于《HTML Canvas宽高设置与绘图坐标解析》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！