W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML Canvas(画布) 教程



Your browser does not support the <canvas> element.

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

左侧的图形是由 <canvas> 创建的。它显示四个元素:红色矩形,渐变矩形,多色矩形和多色文本。


什么是画布(Canvas)?

HTML <canvas> 元素用于通过脚本(通常为JavaScript)即时绘制图形。

<canvas> 元素只是图形的容器。您必须使用脚本来实际绘制图形。

画布有几种绘制路径,框,圆,文本和添加图像的方法。


浏览器支持

表中的数字指定完全支持 <canvas> 元素的第一个浏览器版本。

元素
<canvas> 4.0 9.0 2.0 3.1 9.0

HTML画布可以绘制文本

画布可以绘制带或者不带动画的彩色文本。


HTML画布可以绘制图形

画布具有图形数据呈现与图像的巨大功能。


HTML画布可以动画化

画布对象可以移动。一切都是可能的:从简单的弹跳球到复杂的动画。


HTML画布可以互动

画布可以响应JavaScript事件。

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


HTML画布可用于游戏

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


画布实例

在HTML中, <canvas> 元素显示如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

<canvas> 元素必须具有id属性,因此可以由JavaScript引用。

width 和 height 属性是定义画布大小所必需的。

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

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

要添加边框,请使用 style 属性:

Example

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
尝试一下 »

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