canvas的width/height属性控制绘图缓冲区分辨率，即实际像素网格大小；css宽高仅控制显示尺寸，不改变缓冲区，导致缩放失真；响应式需按devicepixelratio同步设置缓冲区与css尺寸。
canvas 的 width/height 属性到底控制什么
它控制的是画布的「绘图缓冲区分辨率」，也就是浏览器实际分配的像素网格大小。比如 width="800" 和 height="600"，就表示内部有一块 800×600 的位图内存区域——所有坐标（ctx.fillRect(0,0,100,100)）、线条粗细（ctx.lineWidth = 1）、文字渲染、getImageData() 返回的数据量，全基于这个像素网格。
这个值不是“样式”，不能带单位："800px" 或 800.5 都会被忽略，回退到默认的 300×150；负数在 Chrome/Firefox 中也按 0 处理（IE 则直接失效）。
关键副作用：canvas.width = 800 会清空整个画布、重置上下文状态（变换矩阵、裁剪路径、当前字体等），这不是 bug，是重建缓冲区的必然行为。
为什么只用 CSS 设置宽高必然拉伸模糊
CSS 的 width 和 height 只控制 canvas 元素在页面中的显示框尺寸，不碰底层像素。浏览器只能对已有的低分辨率位图做插值缩放——就像把一张 300×150 的 JPEG 拉到 800×600 显示，再怎么优化也是模糊、锯齿、圆形变椭圆。
常见失真现象包括：
-
ctx.lineWidth = 1画出来像 2 像素宽 - 鼠标点击坐标偏移几十像素（
event.clientX映射不到真实画布坐标） -
isPointInPath()判断失效 - 高 DPI 设备下（
window.devicePixelRatio === 2）问题翻倍：物理像素只有 150×75，却要填满 300×150 的显示区域
响应式场景下如何同步 HTML 属性与 CSS 尺寸
核心原则：先确定显示尺寸（CSS 框），再按设备像素比放大缓冲区，最后用 CSS 把显示框缩回原尺寸。
正确流程如下：
- 获取容器实际布局尺寸：
const w = canvas.clientWidth、const h = canvas.clientHeight - 按设备像素比设置缓冲区：
canvas.width = w * window.devicePixelRatio、canvas.height = h * window.devicePixelRatio - 用 CSS 固定显示尺寸：
canvas.style.width = w + "px"、canvas.style.height = h + "px" - 务必重绘内容（因为
canvas.width赋值已清空画布）
注意：resize 事件监听不够，必须确保 DOM 已就绪（DOMContentLoaded 后执行，或脚本放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
