文档介绍：点评:HTML 5 规范引进了很多新特性,其中最令人期待的之一就是 canvas 元素。
HTML 5 canvas ——基本语法
简述
5 规范引进了很多新特性,其中最令人期待的之一就是元素。HTML 5 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的提供图形绘制功能。 5 规范引进了很多新特性,其中最令人期待的之一就是元素。 5 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的提供图形绘制功能。
大部分的浏览器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ,Firefox 也可以通过插件形式支持 3D canvas :
下载支持 3D canvas, HTML video 和 File I/O 的 Opera
关于 Opera 3D canvas 上下文的文章
关于 Firefox 3D canvas 上下文的文章
本文介绍 2D canvas 基础以及如何使用基本 canvas 函数,如线条、形状、图像和文字等。为了理解此文章,你最好了解 JavaScript 基础知识。
可以点击此处批量下载本文实例代码
canvas 基础
创建 canvas 的方法很简单,只需要在 HTML 页面中添加元素:
Fallback content, in case the browser does not support Canvas.
为了能在 JavaScript 中引用元素,最好给元素设置 ID ;也需要给 canvas 设定高度和宽度。
创建好了画布后,让我们来准备画笔。要在画布中绘制图形需要使用 JavaScript 。首先通过 getElementById 函数找到 canvas 元素,然后初始化上下文。之后可以使用上下文 API 绘制各种图形。下面的脚本在 canvas 中绘制一个矩形(点击此处查看效果):
// Get a reference to the element.
var elem = ('myCanvas');
// Always check for properties 和 methods, to make sure your code doesn't break
// in other browsers.
if (elem && ) {
// Get the 2d context.
// Remember: you can only initialize one context per element.
var context = ('2d');
if (context) {
// You