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 页面中添加 元素：
为了能在 JavaScript 中引用元素，最好给元素设置 ID ；也需要给 canvas 设定高度和宽度。
创建好了画布后，让我们来准备画笔。要在画布中绘制图形需要使用 JavaScript 。首先通过 getElementById 函数找到 canvas
元素，然后初始化上下文。之后可以使用上下文 API 绘制各种图形。下面的脚本在 canvas 中绘制一个矩形 (点击此处查看效果)：
// Get a reference to the element.
var elem = document.getElementById('myCanvas');
// Always check for properties 和 methods, to make sure your code doesn't break
// in other browsers.
if (elem && elem.getContext) {
// Get the 2d context.
// Remember: you can only initialize one context per element.
var context = elem.getContext('2d');
if (context) {
// You are done! Now you can draw your first rectangle.
// You only need to provide the (x,y) coordinates, followed by the width and
// height dimensions.
context.fillRect(0, 0, 150, 100);
}
}可以把上面代码放置在文档 head 部分中，或者放在外部文件中。
2D context API
介绍了如何创建 canvas 后，让我们来看看 2D canvas API，看看能用这些函数做些什么。
基本线条
上面的例子中展示了绘制矩形是多么简单。
通过 fillStyle 和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 十六进制数、()、() 和 ()（ 若浏览器支持，如 Opera10 和 Firefox 3)。十六进制数、()、() 和 ()（ 若浏览器支持，如 Opera10 和 Firefox 3)。
通过 fillRect 可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。如果想清除部分 canvas 可以使用 clearRect。上述三个方法的参数相同：x, y, width, height。前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。
可以使用 lineWidth 属性改变线条粗细。让我们看看使用了fillRect,strokeRect clearRect 和其他的例子：
context.fillStyle = '#00f'; // blue
context.strokeStyle = '#f00'; // red
context.lineWidth = 4;
// Draw some rectangles.
context.fillRect (0, 0, 150, 50);
context.strokeRect(0, 60, 150, 50);
context.clearRect (30, 25, 90, 60);
context.strokeRect(30, 25, 90, 60);此例子效果图见图1.
图 1: fillRect, strokeRect 和
clearRect效果图
路径
通过 canvas 路径（path）可以绘制任意形状。可以先绘制轮廓，然后绘制边框和填充。创建自定义形状很简单，使用 beginPath()开始绘制，然后使用直线、曲线和其他图形绘制你的图形。绘制完毕后调用 fill 和 stroke 即可添加填充或者设置边框。调用 closePath() 结束自定义图形绘制。
下面是一个绘制三角形的例子：
// Set the style properties.
context.fillStyle = '#00f';
context.strokeStyle = '#f00';
context.lineWidth = 4;
context.beginPath();
// Start from the top-left point.
context.moveTo(10, 10); // give the (x,y) coordinates
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);
// Done! Now fill the shape, 和 draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();其效果图见图2.
图 2: 三角形
另一个较负责的例子中使用了直线、曲线和圆弧。
插入图像
drawImage 方法允许在 canvas 中插入其他图像
( img 和 canvas 元素) 。在 Opera 中可以再 canvas 中绘制 SVG 图形。此方法比较复杂，可以有3个、5个或9个参数：
- 3个参数：最基本的
drawImage使用方法。一个参数指定图像位置，另两个参数设置图像在 canvas中的位置。 - 5个参数：中级的
drawImage使用方法，包括上面所述3个参数，加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。 - 9个参数：最复杂
drawImage杂使用方法，包含上述5个参数外，另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。
下面是上述三个使用方法的例子：
// Three arguments: the element, destination (x,y) coordinates.
context.drawImage(img_elem, dx, dy);
// Five arguments: the element, destination (x,y) coordinates, and destination
// width and height (if you want to resize the source image).
context.drawImage(img_elem, dx, dy, dw, dh);
// Nine arguments: the element, source (x,y) coordinates, source width and
// height (for cropping), destination (x,y) coordinates, and destination width
// and height (resize).
context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);其效果见图3.
图 3: drawImage 效果图。
像素级操作
2D Context API 提供了三个方法用于像素级操作：createImageData, getImageData, 和putImageData。
ImageData对象保存了图像像素值。每个对象有三个属性: width, height