17370845950

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`，更流畅且省资源：

• 把绘图逻辑封装成函数，比如 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），需手动计算坐标判断