canvas默认宽高为300×150像素，是确定的绘图缓冲区尺寸；仅用CSS设置会引发等比拉伸失真，动态修改width/height属性将清空画布并重置上下文。
width 和 height 缺省值就是 300 和 150 —— 不设它们，画布照样有尺寸，不是“没定义”或“自动适配”。
canvas 的默认像素尺寸是确定的
浏览器按 HTML5 规范硬编码了这两个值：width 默认为 300，height 默认为 150，单位都是像素（px），且不可省略单位或写成小数/负数。这个尺寸是画布的**实际绘图缓冲区大小**，也就是你调用 ctx.fillRect() 时坐标系的真实范围。
- 不写
width/height属性 ≠ 没有尺寸，而是直接走默认值 - 哪怕只写一个（比如只设
width="400"），height仍为150 - 值必须是整数字符串（如
"300"），写成"300px"或300.5会被忽略，回退到默认
为什么不能只靠 CSS 设置宽高
CSS 的 width/height 只控制 canvas 元素的**显示框大小**，不改变底层像素网格。一旦两者不一致，就会触发等比拉伸 —— 这不是响应式，是失真。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 例如：
<canvas width="200" height="100"></canvas>+style="width:400px;height:300px;"→ 实际绘制区域仍是 200×100 像素，但被强行撑开到 400×300 显示，图形变胖或拉长 - 圆变成椭圆、文字发虚、鼠标坐标映射错位，都是典型表现
- 高 DPI 屏幕下更明显：CSS 尺寸没缩放，但像素密度翻倍，原生尺寸不够会导致锯齿
动态修改 width/height 会清空画布
JavaScript 赋值 canvas.width = 600 或 canvas.height = 400 不是“调整”，而是**重建缓冲区** —— 所有已绘制内容立即丢失，ctx 状态重置（包括变换、裁剪路径等）。
- 这和
canvas.style.width = "600px"完全不同：后者只是视觉缩放，内容还在 - 想保留内容再缩放？得手动把旧画布内容
drawImage()到新画布上 - 响应式场景中，建议监听
resize后先读当前clientWidth/clientHeight，再按需设置canvas.width/height并重绘
真正容易被忽略的是：哪怕你用 JS 初始化了尺寸，如果后续又通过 CSS 覆盖了显示大小，而没同步更新原生属性，失真就藏在那儿，等你画一条斜线或放一张图才突然暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
