HTML 画布 教程

HTML 画布示例

上面的图形是用 <canvas> 创建的。它包含四个对象：一个红色矩形、一个渐变矩形、一个多色矩形和一个多色文本。

您应该已经了解的知识

在您继续之前，您应该对以下内容有基本的了解

• HTML
• 基本 JavaScript

如果您想先学习这些科目，请在我们的 主页 上找到教程。

什么是 HTML 画布？

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

<canvas> 元素只是一个图形容器。您必须使用脚本才能实际绘制图形。

画布有几种方法可以绘制路径、方框、圆形、文本和添加图片。

HTML 画布可以绘制文本

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

HTML 画布可以绘制图形

画布具有出色的图形数据呈现功能，可以显示图表和图形的图像。

HTML 画布可以制作动画

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

HTML 画布可以交互

画布可以响应 JavaScript 事件。

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

HTML 画布可用于游戏

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

画布示例

在 HTML 中，<canvas> 元素看起来像这样

id 属性是必需的（以便 JavaScript 可以引用它）。

width 和 height 属性定义画布的大小。

提示：画布的默认大小为 300px（宽度）x 150px（高度）。

提示：您可以在一个 HTML 页面上使用多个 <canvas> 元素。

默认情况下，<canvas> 元素没有边框，也没有内容。

要添加边框，请使用 style 属性

接下来的章节将介绍如何在画布上绘制。