HTML 画布 教程

HTML<canvas> 元素用于在网页上绘制图形。

上面的图形是用<canvas> 。

它显示四个元素：一个红色矩形、一个渐变矩形、一个多色矩形和一个多色文本。

什么是 HTML Canvas？

HTML<canvas> 元素用于通过脚本（通常是 JavaScript）动态绘制图形。

这<canvas>元素只是图形的容器。您必须使用脚本才能真正绘制图形。

Canvas 有几种绘制路径、框、圆圈、文本和添加图像的方法。

浏览器支持

表中的数字表示第一个完全支持<canvas>元素。

HTML Canvas 可以绘制文本

Canvas 可以绘制彩色文本，可以带动画也可以不带动画。

HTML Canvas 可以绘制图形

Canvas 具有以图形和图表图像呈现图形数据的强大功能。

HTML Canvas 可以动画

画布对象可以移动。一切皆有可能：从简单的弹跳球到复杂的动画。

HTML Canvas 可以交互

Canvas 可以响应 JavaScript 事件。

Canvas 可以响应任何用户动作（键盘点击、鼠标点击、按钮点击、手指移动）。

HTML Canvas 可用于游戏

Canvas 的动画方法为 HTML 游戏应用程序提供了许多可能性。

Canvas 示例

在 HTML 中，<canvas> 元素如下所示：

这<canvas>元素必须具有 id 属性，以便 JavaScript 可以引用它。

宽度和高度属性对于定义画布的大小是必要的。

提示： 您可以有多个<canvas>一个 HTML 页面上的元素。

要添加边框，请使用样式属性：

下一章将展示如何在画布上绘图。