HTML5 Canvas

HTML5 的 <canvas> 元素提供了一个通过 JavaScript 来动态绘制图形的强大途径。你可以把它想象成一个“画布”，你可以在上面绘制线条、形状、文字、图像等任何东西。

<canvas> 本身只是一个图形容器，你必须使用 JavaScript 脚本来完成实际的绘图任务。它被广泛应用于数据可视化、图片编辑器、游戏开发等领域。

创建一个 Canvas

首先，在 HTML 中放置一个 <canvas> 元素，并为其指定一个 id 以便在脚本中引用它，同时设置 width 和 height。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
  您的浏览器不支持 Canvas 标签。
</canvas>

使用 JavaScript 绘图

绘图的所有操作都在 JavaScript 中完成。

1. 获取 Canvas 元素: 使用 document.getElementById() 获取到 <canvas> 元素。
2. 获取 2D 渲染上下文: 调用元素的 getContext('2d') 方法。这个方法返回一个对象，该对象拥有所有绘图的方法和属性。
3. 开始绘图: 使用上下文对象进行绘图操作。

绘制一个矩形

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

<script>
  // 1. 获取 Canvas 元素
  var c = document.getElementById("myCanvas");

  // 2. 获取 2D 上下文
  var ctx = c.getContext("2d");

  // 3. 绘图
  ctx.fillStyle = "#FF0000"; // 设置填充颜色为红色
  ctx.fillRect(20, 20, 150, 75); // 绘制一个填充的矩形 (x, y, width, height)
</script>

绘制一条线

绘制路径（如线条）通常遵循以下步骤：

1. beginPath(): 开始一个新路径。
2. moveTo(x, y): 将画笔移动到指定的坐标，作为路径的起点。
3. lineTo(x, y): 添加一条从当前位置到指定坐标的直线。
4. stroke(): 实际地绘制出路径的轮廓。

<canvas id="lineCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

<script>
  var c = document.getElementById("lineCanvas");
  var ctx = c.getContext("2d");

  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(200, 100);
  ctx.stroke();
</script>

绘制一个圆形

绘制圆形或圆弧使用 arc(x, y, radius, startAngle, endAngle) 方法。

<canvas id="circleCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

<script>
  var c = document.getElementById("circleCanvas");
  var ctx = c.getContext("2d");

  ctx.beginPath();
  // (圆心x, 圆心y, 半径, 起始角, 结束角)
  ctx.arc(95, 50, 40, 0, 2 * Math.PI);
  ctx.stroke();
</script>

Canvas vs. SVG

HTML5 还提供了另一种图形技术 SVG。它们的主要区别是：

• Canvas:

  • 基于像素（位图）。
  • 通过 JavaScript 绘制，是“画了就算”的模式，不保留对图形对象的引用。
  • 放大后会失真。
  • 适合像素级的图像处理、动态渲染和游戏。

• SVG (Scalable Vector Graphics):

  • 基于 XML 的矢量图形。
  • 每个形状都是一个 DOM 元素，可以通过 CSS 和 JS 进行操作。
  • 无限缩放不失真。
  • 适合高质量、可交互的图表、图标和地图。