Html5 Canvas简介

Apple最初创建了Canvas元素，它不仅用于它的Safari浏览器，而且也用在Mac OS X Dashboard中。它最终被WhatWG组织收录，并且还纳入到了将来的HTML 5.0（HTML的下一个版本）的实现中，基于Gecko 的浏览器都支持它，例如Firefox、Safari，以及Opera。IE是不提供支持的，但是也正尝试着提供一些跨浏览器对象。
canvas元素仅是一个元素而已。在大多数情况下，你可以通过DOM访问canvas元素的上下文，并使用它来建立一些复杂的效果。
Canvas对象非常容易使用。要开始使用它，你所要做的就是为Web页面添加一个canvas元素：

要建立图形，你可以使用该对象特有的DOM方法getContext，来访问Canvas上下文，当然，首先需要进行测试，以确保浏览器支持该对象：

1
2
3
4
5

var canvas = document.getElementById(‘graph’);
if (canvas.getContext) {
var ctx = canvas.getContext(’2d’);
…
}

一旦拥有了canvas对象，你就可以执行一些绘图操作：建立图形、绘制路径、画圆弧、操纵图片（已加入到XHTML页面的Canvas对象中）、建立二次方曲线，等等。只要建立了这些对象，就和SVG一样，你可以添加一些效果，例如：颜色、填充、透明，甚至建立图章图案。你还可以建立梯度，以及非常独特的线条衔接转角。

关于Canvas对象，Mozilla在http://developer.mozilla. org/en，可以查照上面的指导深入了解Canvas.

基本用法:

The Canvas element

1

<canvas id=”tutorial” width=”150″ height=”150″></canvas>

当然，这样只是简单的创建了一个 Canvas 对象而已，并没有对它进行任何操作，这个时候的 canvas 元素看上去与 div 元素是没什么区别的，在页面上什都看不出来。
节点和img节点很相似,惟一区别是他没有src和alt属性.节点只有width和height两个属性,并且width默认为300 pixels,height默认为150 pixels.
该节点同样是一个html的属性,为了方便DOM操作,建议在该节点增加一个id属性.

Required tag
为了能够广泛大使用在web上,要求标签必须存在,Mozilla浏览器的实现就要求这一个结束标签,但Safari浏览器就把节点一样当作img 看待,没有写结束标签.

The Rendering Context
节点初始化是空白的,要想在该节点内显示一些东西,就必须获取到该节点大上下文对象.canvas节点有个DOM方法getContext,用来渲染该节点,,在调用的时候需要传递一个Context 类型参数，目前可以用的并且是唯一可以用的类型值就是 2d.
大部分的浏览器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ，Firefox 也可以通过插件形式支持 3D canvas .

1
2

var canvas = document.getElementById(‘graph’);
var ctx = canvas.getContext(’2d’);

Checking for support
为了判断浏览器是否支持canvas对象,可以用一下检测方法:

1
2
3
4
5
6
7

var canvas = document.getElementById(‘graph’);
if (canvas.getContext){
var ctx = canvas.getContext(’2d’);
// drawing code here
} else {
// canvas-unsupported code here
}

2D context API
fillStyle 和 strokeStyle:设置矩形的填充和线条.
颜色值使用方法和 CSS 一样：十六进制数、rgb()、rgba() 和 hsla().
fillRect:绘制带填充的矩形。
strokeRect:绘制只有边框没有填充的矩形。
如果想清除部分 canvas 可以使用 clearRect。
上述三个方法的参数相同：x, y, width, height。前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。
ineWidth 属性改变线条粗细.

当然，context还支持路径、图像、像素、文字、颜色渐变操作
原文链接：http://www.javachen.com/2010/03/html5-canvas/