Canvas是HTML5提供的位图绘图API，通过元素和getContext('2d')获取上下文绘图，支持矩形、路径、动画等，需手动清空画布，适用于高性能图形渲染。
Canvas 是 HTML5 提供的一个绘图 API，它通过一个 `canvas>` 元素提供一块“空白画布”，JavaScript 可以在上面用代码绘制图形、图像、文字，甚至实现流畅的动画。它不是 DOM 元素集合，而是一块位图区域——一旦画上去，就只是像素，没有对象概念（不像 SVG 那样保留图形结构）。
获取上下文并开始绘图
Canvas 本身只是容器，真正绘图靠的是它的 2D 渲染上下文（`getContext('2d')`）：
- 在 HTML 中添加 ``
- 用 JavaScript 获取 canvas 元素和上下文：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); - 所有绘图操作都通过
ctx对象调用，比如ctx.fillRect(10, 10, 100, 50)画一个实心矩形
绘制基本图形
Canvas 提供了简单直接的绘图方法，注意：多数图形需先“描边”或“填充”才会显示：
- 矩形：`ctx.fillRect(x, y, width, height)`（填充），`ctx.strokeRect()`（描边），`ctx.clearRect()` 清除指定区域
- 路径类图形（线、圆、多边形）：先调用 `ctx.beginPath()`，再用 `ctx.moveTo()`、`ctx.lineTo()`、`ctx.arc()` 等构建路径，最后用 `ctx.fill()` 或 `ctx.stroke()` 渲染
-
例子：画一个红色实心圆
ctx.beginPath();
ctx.arc(100, 100, 30, 0, Math.PI * 2); // 圆心(100,100)，半径30
ctx.fillStyle = 'red';
ctx.fill();
实现简单动画
Canvas 动画本质是「清空 → 绘制新帧 → 重复」，推荐用 `requestAnimationFrame` 替代 `setInterval`，更流畅且省资源：
立即学习“Java免费学习笔记（深入）”；
- 把绘图逻辑封装成函数，比如
function draw() { /* 清空 + 绘制当前帧 */ } - 在函数末尾调用
requestAnimationFrame(draw)实现循环 - 用变量控制位置/状态（如
x += 2），每次重绘时使用更新后的值 - 关键点：必须主动清空画布（如 `ctx.clearRect(0, 0, canvas.width, canvas.height)`），否则会拖影
进阶提示
Canvas 能力远不止基础图形：
- 支持图像绘制（`ctx.drawImage(img, x, y)`）、文字渲染（`ctx.fillText()`）、渐变与阴影
- 可读取像素数据（`ctx.getImageData()`），用于图像处理或碰撞检测
- 结合鼠标/触摸事件，能做绘图板、图表、游戏等交互应用
- 性能高，适合大量图形或高频更新场景；但无内置事件绑定（比如不能直接给一个圆加 click），需手动计算坐标判断
