<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画. 右边的图片展示了一些 <canvas> 的实现示例,在这个教程后面我们将看到.

本篇教程描述了如何使用从一些基础开始,用<canvas>元素来绘制2D图形。教程中提供的例子,会让你明白可以用canvas做什么,也会提供一些代码片段来帮助你开始构建自己的内容。

<canvas> 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,随后被各个浏览器实现。如今,所有主流的浏览器都支持它。

开始之前

使用 <canvas> 元素不是非常难但你需要一些基本的HTMLJavaScript知识。一些过时的浏览器不支持<canvas> 元素,但是所有的新版本主流浏览器都支持它。Canvas 的默认大小为300像素×150像素(宽×高,像素的单位是px)。但是,可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。为了在 Canvas 上绘制图形,我们使用一个JavaScript上下文对象,它能动态创建图像( creates graphics on the fly)。

本教程包含

相关链接

文档标签和贡献者

最后编辑者: junshine,