canvas标签需用html width/height属性定义像素尺寸，css仅控制显示大小；必须通过getcontext("2d")获取上下文绘图；坐标系原点在左上角；样式和路径状态需手动设置；响应式需重设缓冲区并重绘。

标签本身不自动显示图形，它只是提供一块**可编程的像素区域**——真正成为“画布”的关键，在于正确声明尺寸、获取上下文，并理解其底层机制。

宽高必须用 HTML 属性定义，不是 CSS

width 和 height 是 <canvas></canvas> 的原生属性，直接决定内部位图缓冲区的像素数量（比如 width="600" height="400" 就是 600×400 像素的帧缓冲）。
如果只用 CSS 设置尺寸（如 style="width:600px;height:400px"），浏览器只会拉伸默认的 300×150 像素缓冲区，导致：

• 图形拉伸变形（圆变椭、文字模糊）
• 鼠标坐标与绘图位置错位
• lineWidth = 1 看起来像 2px 或更粗
• 动画轨迹偏移、路径渲染失真

✅ 正确写法：

<canvas id="myCanvas" width="600" height="400">您的浏览器不支持 canvas</canvas>

获取 2D 上下文是绘图的前提

<canvas></canvas> 自身没有绘图能力，必须通过 JavaScript 获取上下文对象：

• getContext("2d") 返回 CanvasRenderingContext2D，用于平面绘图
• 字符串 "2d" 必须小写，拼错（如 "2D"、"two-d"）会返回 null
• 同一个 <canvas></canvas> 元素不能先后获取 "2d" 和 "webgl"，互斥

安全初始化示例：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

const canvas = document.getElementById("myCanvas");
if (!canvas) throw new Error("未找到 canvas 元素");
const ctx = canvas.getContext("2d");
if (!ctx) throw new Error("浏览器不支持 2D 上下文");

画布坐标系固定，原点在左上角

• (0, 0) 是画布左上角，x 向右递增，y 向下递增
• 所有绘图函数（如 fillRect(x, y, w, h)、arc(x, y, r, ...)）都基于这个坐标系
• 不要试图用 ctx.transform 翻转 y 轴来“适配数学习惯”，这会让鼠标事件、字体、图像加载全部错乱

绘图前必须手动设置样式和路径状态

Canvas 不继承任何 CSS 样式，也没有默认颜色或线宽：

• 每次调用 fillRect() 前，需设 ctx.fillStyle；调用 strokeRect() 前，需设 ctx.strokeStyle 和 ctx.lineWidth
• 使用路径类操作（beginPath() → moveTo() → lineTo() → fill()/stroke()）时，漏掉 beginPath() 会导致旧路径重复叠加
• fillStyle 支持颜色名、十六进制、rgb()、rgba()、渐变、图案，但不支持 CSS 变量

响应式场景需同步重设缓冲区并重绘

若画布需要随窗口缩放：

• 监听 resize 事件，读取容器尺寸（如 container.clientWidth）
• 手动赋值 canvas.width = newWidth; canvas.height = newHeight
• 重设后所有绘图状态清空：fillStyle、lineWidth、变换矩阵、当前路径全丢失，必须重新设置并调用重绘函数
• 避免高频重绘，可用 requestAnimationFrame 或节流控制

Canvas 不是自动刷新的 UI 组件，它没有脏检查、没有 diff、没有图层管理。你改数据，画面不会变；你动 style，缓冲区没动，图形就失真。一切清晰、准确、可控，都靠你亲手清、画、缩、算。

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