canvas的width/height属性必须设在标签内或JS中，控制绘图缓冲区分辨率；仅用CSS设置会导致拉伸模糊、坐标偏移、图形变形，高DPI设备下更严重。

width 和 height 必须写在 标签里，否则画布就是 300×150 像素——这不是“没设”，而是浏览器硬编码的默认值，直接决定绘图缓冲区分辨率。

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

CSS 的 width 和 height 只控制显示框大小，不改底层像素网格。一旦两者不一致，浏览器就会拉伸位图，导致图形变形、文字发虚、鼠标点击坐标偏移几十像素。

• 比如： + style="width:400px;height:200px;" → 实际绘制区域仍是 200×100，但被撑开两倍，圆变椭圆
• 高清屏（window.devicePixelRatio > 1）下更明显：CSS 没缩放，但像素密度翻倍，原生尺寸不够就锯齿
• 触控或鼠标交互时，event.clientX / clientY 映射到画布坐标系会错位，除非你手动做 DPI 缩放换算

HTML 属性和 JS 动态赋值的区别

canvas.width 和 canvas.height 是 DOM 属性，JS 修改它们会清空整个画布、重置上下文状态（包括变换矩阵、裁剪路径、当前字体等），不是“缩放”而是重建缓冲区。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• ✅ 安全写法：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 后执行，或把脚本放在

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！