HTML Canvas 教程
HTML <canvas> 元素用于在网页上绘制图形。
HTML <canvas> 元素只是一个图形容器。您必须使用脚本来实际绘制图形。
Canvas 提供了多种方法来绘制路径、框、圆形、文本和添加图像。
Canvas 受所有主要浏览器支持。
HTML Canvas 示例
上面的图形是用 <canvas> 创建的。它包含四个对象：一个红色矩形、一个渐变矩形、一个多色矩形和一个多色文本。
您应该已经知道
在继续之前，您应该对以下内容有基本了解
- HTML
- 基础 JavaScript
如果您想先学习这些主题，请在我们首页上查找教程。
什么是 HTML Canvas？
HTML <canvas> 元素通过脚本（通常是 JavaScript）即时绘制图形。
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Canvas 提供了多种方法来绘制路径、框、圆形、文本和添加图像。
HTML Canvas 可以绘制文本
Canvas 可以绘制彩色文本，可以带动画也可以不带动画。
HTML Canvas 可以绘制图形
Canvas 拥有强大的功能，可用于图形数据可视化，如绘制图表和图形。
HTML Canvas 可以制作动画
Canvas 对象可以移动。一切皆有可能：从简单的弹跳球到复杂的动画。
HTML Canvas 可以交互
Canvas 可以响应 JavaScript 事件。
Canvas 可以响应任何用户操作（键盘点击、鼠标点击、按钮点击、手指滑动）。
HTML Canvas 可用于游戏
Canvas 的动画方法为 HTML 游戏应用程序提供了许多可能性。
Canvas 示例
在 HTML 中，<canvas> 元素看起来像这样
<canvas id="myCanvas" width="200" height="100"></canvas>
id 属性是必需的（以便 JavaScript 可以引用它）。
width 和 height 属性定义了画布的大小。
提示: 画布的默认大小是 300px（宽度）x 150px（高度）。
提示: 您可以在一个 HTML 页面上放置多个 <canvas> 元素。
默认情况下，<canvas> 元素没有边框和内容。
要添加边框，请使用 style 属性
示例
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
自己动手试一试 »
接下来的章节将展示如何在画布上绘图。
