结论：仅用CSS设置width/height会导致canvas模糊、变形、坐标错位——因CSS只缩放显示框，不改变底层缓冲区尺寸，致使像素映射失效、插值失真、交互逻辑紊乱。
直接说结论：只用 CSS 设置 width 和 height，画布必然模糊、坐标错位、图形变形——这不是“效果不好”，而是底层像素映射彻底失效。
为什么 canvas.style.width/height 会导致线条变粗、圆变椭圆
浏览器对 canvas 的渲染分两层：一是内部的位图缓冲区（实际绘图区域），二是外层的 DOM 显示框。CSS 控制后者，但不碰前者。canvas.width 和 canvas.height 才决定缓冲区尺寸。如果只写 style="width: 400px; height: 300px"，而没设 HTML 属性或 JS 赋值，缓冲区仍是默认的 300×150 像素。浏览器只能把这 300×150 的位图拉伸到 400×300 显示，所有内容被双线性插值放大，结果就是：
- 原本
ctx.lineWidth = 1的线，视觉上变成约 1.3 像素宽（因插值混合） - 用
ctx.arc(200, 150, 50, 0, Math.PI * 2)画圆，实际是画在 300×150 缓冲区里，再被非等比拉伸（比如 400×300），必然变椭圆 -
isPointInPath()判断失效：鼠标点在 (200, 150)，但缓冲区里这个坐标根本超出范围（最大 x 是 300，但 y 只有 150），逻辑全乱
鼠标点击坐标映射错位的典型表现
事件坐标（event.clientX / event.clientY）是相对于页面的物理像素，而 canvas 绘图坐标系绑定的是缓冲区像素。两者不一致时，必须手动换算，否则点哪都不对：
- 假设 canvas 显示尺寸是
800×600（CSS 设置），但缓冲区是默认300×150 - 用户点在显示区域正中心 →
clientX=400, clientY=300 - 直接传给
ctx.isPointInPath(400, 300)？错——缓冲区最大 y 是 150，400 已越界 - 正确做法是按比例缩放：
const x = (clientX - rect.left) * (canvas.width / rect.width)，但前提是你知道canvas.width确实是你想要的值
高 DPI 设备（如 MacBook、iPhone）下问题更致命
当 window.devicePixelRatio === 2 时，CSS 的 800px 实际占 1600 物理像素，但若缓冲区仍是 800×600，那每个逻辑像素要覆盖 2×2 物理像素，浏览器必须插值填充——锯齿和模糊直接翻倍：
立即学习“前端免费学习笔记（深入）”；
- 文字边缘发虚，尤其小字号
- 导出 PNG 时，
toDataURL()返回的图尺寸仍是800×600，但视觉上糊成一团 - 用
getImageData()读取像素，返回数组长度只有800×600×4字节，远低于设备应有精度 - 修复方式不是“加大 CSS 值”，而是：先读
canvas.clientWidth和canvas.clientHeight，再乘以devicePixelRatio赋给canvas.width/canvas.height，最后用ctx.scale(dpr, dpr)补偿坐标系
动态重设 canvas.width/height 会清空画布，但这是必须承受的代价
很多人想“缩放而不清空”，于是只改 style.width——这恰恰回到开头的坑。JS 修改 canvas.width 或 canvas.height 确实会清空内容、重置所有上下文状态（包括 fillStyle、transform、裁剪路径），但这不是 bug，是浏览器重建缓冲区的必然行为：
- ✅ 正确响应式写法：监听
ResizeObserver或window.resize，然后canvas.width = canvas.clientWidth * dpr，再重绘整帧 - ❌ 错误幻想：用
canvas.style.transform = 'scale(2)'或ctx.scale(2, 2)替代缓冲区重设——这只缩放绘制结果，不提升精度，模糊照旧 - ⚠️ 容易被忽略的细节：即使你初始化时写了
<canvas width="800" height="600"></canvas>，后续若用 CSS 覆盖显示尺寸（比如max-width: 100%），而没同步更新原生属性，失真就静默存在，直到你画一条斜线或拖动一个图形才突然暴露
