Canvas 前言

HTML Canvas 是什么？

HTML 的 <canvas> 元素提供了一种强大且灵活的方式，可以使用 JavaScript 在网页上动态绘制图形、动画和其他视觉元素。可以将其视为一个依赖分辨率的位图绘图表面。

<canvas> 元素本身只是一个容器。所有绘图操作都使用 JavaScript 执行，通常通过访问 canvas 的 2D 渲染上下文（对于 3D 图形则使用 WebGL）来完成。

Canvas API（应用程序接口）提供了丰富的函数集，用于绘制路径（线条、形状）、矩形、圆形、文本以及合成图像。

浏览器支持

<canvas> 元素受到所有现代 Web 浏览器的广泛支持，包括：

• Google Chrome（4.0+ 版本起）
• Mozilla Firefox（2.0+ 版本起）
• Microsoft Edge（所有版本，以及 Internet Explorer 9.0 版本起）
• Safari（3.1+ 版本起）
• Opera（9.0+ 版本起）

实际上，您可以假设当今所有相关的浏览器都完全支持它。为非常老的浏览器提供的备用内容（例如 <canvas> 标签内的文本内容）现在已很少需要。

HTML Canvas 的主要功能

动态文本渲染

Canvas 允许绘制可自定义、色彩丰富的文本。您可以控制字体、大小、样式、对齐方式，并对文本元素应用阴影或渐变等效果，这些文本元素也可以进行动画处理。

复杂图形和数据可视化

Canvas 擅长创建复杂的图形表示，例如图表（柱状图、折线图、饼图）、图形和其他数据可视化。其像素级别的控制能力可以实现详细和自定义的视觉输出。

动画

Canvas 对象可以进行动画处理。通过快速重绘场景，您可以创建从简单的弹跳球、粒子效果到复杂的交互式动画和视觉序列的任何内容。requestAnimationFrame 是实现流畅 Canvas 动画的现代标准。

交互性

Canvas 绘图可以响应用户交互，如鼠标点击、鼠标移动、键盘输入和触摸事件。这使得创建交互式图形、绘图应用程序和游戏成为可能。

游戏开发

绘图能力、动画控制和交互性的结合使得 Canvas 成为直接在浏览器中开发 2D 游戏的流行选择，无需依赖外部插件。

图像处理

Canvas 可用于在像素级别加载、显示和操作图像。这包括裁剪、调整大小、过滤（例如，灰度、深褐色）以及合成多个图像。

Canvas 基本结构

在您的 HTML 文件中，<canvas> 元素定义如下：

<canvas id="myCanvas" width="200" height="100">
  Your browser does not support the HTML canvas tag.
</canvas>

主要属性：

• id：从 JavaScript 引用 canvas 元素所必需。
• width：定义 canvas 绘图表面的宽度（以 CSS 像素为单位）。
• height：定义 canvas 绘图表面的高度（以 CSS 像素为单位）。

重要提示：始终直接在 <canvas> 标签本身上设置 width 和 height 属性，而不是通过 CSS。使用 CSS 设置 canvas 的宽度和高度会缩放绘图表面，通常会导致图形模糊或失真。这些属性定义了可用于绘图的实际像素数量。

提示：您可以在 <canvas> 开始标签和结束标签之间包含备用内容。此内容将由不支持 canvas 的浏览器显示（现在这种情况非常少见）。

为了在开发过程中增加视觉清晰度而添加边框，您可以使用 CSS：

<!-- 在您的 HTML 文件中 -->
<canvas id="myCanvasWithBorder" width="200" height="100"></canvas>

<!-- 在您的 CSS 文件或 <style> 标签中 -->
<style>
  #myCanvasWithBorder {
    border: 1px solid #000000; /* 黑色边框 */
  }
</style>

后续章节将指导您如何使用 JavaScript 在此 canvas 元素上进行绘制。