Canvas标签需用HTML属性设宽高，获取2D上下文后手动重绘位图，支持矩形、圆弧、路径、文字和图像绘制，适合高频刷新场景。
定义画布区域：宽高必须写在HTML属性里
使用标签时，width和height必须作为HTML属性显式声明，不能只靠CSS设置：
- ✅ 正确写法：
- ❌ 错误写法：
（会导致图像拉伸、模糊、坐标错乱） - 提示文本可写在标签内部，用于不支持Canvas的旧浏览器回退显示，例如：
获取2D绘图上下文：所有绘制操作的入口
Canvas元素自身没有绘图能力，必须通过JavaScript获取上下文对象：
- 调用
getContext("2d")获得CanvasRenderingContext2D实例，这是2D绘图的唯一操作接口 - 示例：const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d"); - 注意：同一个
只能获取一种上下文（2D或WebGL），不可混用
理解“位图+重绘”机制：性能优势的来源
Canvas本质是内存中的位图缓冲区，每次视觉更新都需手动清除并重画：
- 没有自动DOM更新或图层管理，绘图后即固化为像素，修改某一部分必须重绘整个相关区域
- 正因如此，它比SVG更适合高频刷新场景（如游戏帧循环、实时图表流）
- 常用优化手段包括：
requestAnimationFrame驱动动画、离屏Canvas预合成、分层Canvas叠加（如UI层+游戏层+特效层）
基础绘制能力：从静态到动态只需几行代码
拿到ctx后，就能调用标准API实现各类图形输出：
- 画矩形：
ctx.fillRect(x, y, width, height) - 画圆弧：
ctx.arc(cx, cy, radius, startAngle, endAngle) - 描路径：
ctx.beginPath(); ctx.moveTo(); ctx.lineTo(); ctx.stroke() - 填文字：
ctx.font = "20px Arial"; ctx.fillText("Hello", 10, 30) - 贴图像：
ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
