canvas.width和height必须设在html标签内或js中，控制绘图缓冲区分辨率；仅用css设置会导致拉伸模糊、坐标偏移、图形变形，高dpi设备下更严重。
canvas.width 和 canvas.height 必须写在 HTML 标签里，不能靠 CSS 拉伸
直接用 style="width: 100%; height: 400px" 设置 <canvas></canvas> 尺寸，画布会模糊、圆变椭圆、鼠标点击坐标偏移——这不是渲染 bug，而是浏览器把一张固定像素的图强行拉伸显示。
根本原因：width 和 height 属性定义的是「绘图缓冲区分辨率」，即实际有多少个像素点可画；而 CSS 的 width/height 只控制「显示框大小」，两者不一致就触发位图缩放。
-
<canvas width="400" height="300"></canvas>→ 实际是 400×300 像素的位图 -
<canvas style="width:800px;height:600px"></canvas>→ 还是默认 300×150 像素，被拉伸 2.67 倍，必然失真 - 高 DPI 设备（如 MacBook、iPhone）下更明显：
window.devicePixelRatio> 1，原生尺寸不够 → 锯齿、文字发虚
JS 动态设置 canvas.width/height 会清空画布，不是“缩放”
canvas.width = 800 或 canvas.height = 600 是合法操作，但它的效果是重建整个缓冲区：所有已绘制内容消失，上下文状态（fillStyle、font、transform 等）全部重置。
这不是 CSS 那种视觉缩放，而是底层像素网格被销毁再初始化。所以每次改尺寸后，必须手动重绘。
- ✅ 安全用法：
canvas.width = w; canvas.height = h;+ 紧接着调用重绘函数 - ❌ 危险混淆：
canvas.style.width = "800px"→ 不改像素，只拉伸显示，隐患静默存在 - ⚠️ 注意：
canvas.width = "800px"或canvas.width = 800.5会被忽略，回退到默认 300×150
响应式 canvas 初始化：三步缺一不可
单纯监听 resize 事件不够。要让画布既清晰又不失控，必须同步处理布局尺寸、设备像素比和显示样式。
典型流程：
- 读取当前显示尺寸：
const w = canvas.clientWidth;、const h = canvas.clientHeight; - 按设备像素比设置缓冲区：
canvas.width = w * window.devicePixelRatio;、canvas.height = h * window.devicePixelRatio; - 再缩放显示层：
canvas.style.width = w + "px";、canvas.style.height = h + "px";
务必在 DOMContentLoaded 后执行，或把脚本放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
