<canvas>
是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素.它可以用于制作照片集或者制作简单(也不是那么简单)的动画. 右边的图片展示了一些 <canvas>
的应用,在这个教程后面我们将看到.
<canvas>
最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。<canvas>
元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。
这个教程将描述如何在你的HTML页面中使用<canvas>元素。
这些例子为你提供了一些清晰的思路,关于你可以用<canvas>来做什么以及如何开始你自己的实践。
开始之前
使用 <canvas>
元素不是非常难但你需要一些基本的HTML和JavaScript知识。<canvas>
元素不被一些老的浏览器所支持,但是所有的主流浏览器的新近版本都支持。Canvas 的默认大小为300像素×150像素(宽×高,像素的单位是px)。但是,可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。为了在 Canvas 上绘制图形,我们使用一个JavaScript上下文对象,它能动态创建图像( creates graphics on the fly)。