canvas的width/height属性必须设在标签内或JS中，控制绘图缓冲区分辨率；仅用CSS设置会导致拉伸模糊、坐标偏移、图形变形，高DPI设备下更严重。
width 和 height 必须写在 <canvas></canvas> 标签里，否则画布就是 300×150 像素——这不是“没设”，而是浏览器硬编码的默认值，直接决定绘图缓冲区分辨率。
为什么不能只用 CSS 设置 canvas 尺寸
CSS 的 width 和 height 只控制显示框大小，不改底层像素网格。一旦两者不一致，浏览器就会拉伸位图，导致图形变形、文字发虚、鼠标点击坐标偏移几十像素。
- 比如：
<canvas width="200" height="100"></canvas>+style="width:400px;height:200px;"→ 实际绘制区域仍是 200×100，但被撑开两倍，圆变椭圆 - 高清屏（
window.devicePixelRatio > 1）下更明显：CSS 没缩放，但像素密度翻倍，原生尺寸不够就锯齿 - 触控或鼠标交互时，
event.clientX / clientY映射到画布坐标系会错位，除非你手动做 DPI 缩放换算
HTML 属性和 JS 动态赋值的区别
canvas.width 和 canvas.height 是 DOM 属性，JS 修改它们会清空整个画布、重置上下文状态（包括变换矩阵、裁剪路径、当前字体等），不是“缩放”而是重建缓冲区。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- ✅ 安全写法：
canvas.width = 800; canvas.height = 600;—— 用于初始化或响应式重设，但记得后续要重绘 - ❌ 危险操作：
canvas.style.width = "800px";—— 只是视觉拉伸，失真隐患埋着，等你画斜线或贴图才暴露 - ⚠️ 注意：
width和height值必须是整数字符串（如"800"），写成"800px"或800.5会被忽略，回退到默认 300×150
响应式场景下的正确初始化流程
监听 resize 事件本身不够，关键是要同步更新 HTML 属性，并按需缩放显示样式，尤其在高 DPI 设备上。
立即学习“前端免费学习笔记（深入）”；
- 先读取真实布局尺寸：
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后执行，或把脚本放在
