# canvas 与图形

URL: https://caijiao.org/html/11-html5/02-canvas
Source: docs/html/11-html5/02-canvas.md
Description: HTML5 的 标签提供了一个绘图区域，可以通过 JavaScript 绘制图形、动画和交互效果，广泛用于游戏、数据可视化和图像处理。

HTML5 中的 `<canvas>` 标签是一个用于绘制图形的画布区域。它本身是一个容器，依赖 [JavaScript](/javascript/) 来绘制各种二维图形和动画。

## 基本用法

```html
<canvas
  id="myCanvas"
  width="400"
  height="200"
  style="border:1px solid #000;"
></canvas>
```

通过 JavaScript 获取画布上下文（context），开始绘制：

```javascript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d"); // 获取2D绘图上下文

// 绘制一个红色矩形
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 150, 100);
```

## 常用绘图方法

- `fillRect(x, y, width, height)`：绘制填充矩形。
- `strokeRect(x, y, width, height)`：绘制矩形边框。
- `clearRect(x, y, width, height)`：清除画布指定区域。
- `beginPath()` 和 `closePath()`：开始和关闭路径。
- `moveTo(x, y)` 和 `lineTo(x, y)`：绘制路径线段。
- `arc(x, y, radius, startAngle, endAngle)`：绘制圆弧或圆形。
- `fill()` 和 `stroke()`：填充或描边路径。

## 应用场景

- **图形绘制**：画图、绘制形状。
- **动画制作**：游戏、交互动画。
- **数据可视化**：图表、仪表盘。
- **图像处理**：滤镜、特效。

## 注意事项

- `<canvas>` 是位图画布，绘制内容不是 DOM 元素，不能直接被选中或操作。
- 需要用 JavaScript 动态绘制内容。
- 支持二维（2D）和三维（WebGL）绘图。

## 小结

`<canvas>` 提供了灵活强大的图形绘制能力，是 HTML5 中实现动态视觉效果和复杂交互的重要工具。