[学习笔记]HTML 5的元素

<canvas>是HTML 5新增的元素，目前只有Firefox 1.5+和safari支持部分功能，这个元素可以被Script语言(通常是 JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和 不那么简单的)动画。

更多资料可以看mozilla的Canvas tutorial，内有中文版本，可惜翻译不全，而且从Appling Styles and Colors开始就没内容，还是继续英文版……（唉）
摄氏零度以后...倒是有翻译了一部分的版本，翻到moveTo()、lineTo()——http://jiachen.blogbus.com/logs/29567413.html
看了一下已有的例子，canvas可以用的地方很多
Painter —— http://caimansys.com/painter/index.html 一个画图工具，简单了点，如果可以发展起来，也会很强，不过首先要解决的是带宽问题
3D多面体 —— http://www.polyhedra.org/poly/
模拟水波纹 —— http://timelessname.com/canvas/experiment01/
Clifford Attractor —— http://timelessname.com/canvas/experiment02/
3D walker —— http://www.abrahamjoffe.com.au/ben/canvascape/

首先是语法介绍

1. <canvas id="sample" height="150" width="150">
2. </canvas>

很简单，没什么属性可以设置，标签内部（<canvas> …</canvas>）为 Fallback Content，在不支持<canvas>元素的浏览器中将显示fallback content的内容
getContext从目标canvas获得用来绘图的上下文，目前只能用2d这个参数

用法：

1. var ctx = document.getElementById("id").getContext("2d");

<canvas>内部有自己的坐标系,一切坐标,宽/高度都是基于这个坐标系

各类方法：

Rectangles 矩形：

fillRect(x, y, width, height); //绘制一个实心矩形
strokeRect(x, y, width, height); //绘制一个空心矩形
clearRect(x, y, width, height); //清除指定区域

Path 路径：

beginpath(); //打开路径
closePath(); //关闭路径
打开伴随关闭，某些方法会自动关闭路径（如fill()），则可以不用closePath()

moveTo(x, y); //移动绘制点到指定坐标
lineTo(x, y); //在当前坐标到指定坐标之间绘制直线，非封闭图形需使用stroke()描绘线条
比较常用的两个方法，moveTO()用于定位，如果lineTo绘制出来的是非封闭图形，必须使用stroke()描绘线条，否则会出错

arc(x, y, radius, startAngle, endAngle, anticlockwise);
绘制弧线或圆形 x、y-圆心，radius-半径，startAngle-初始角度，endAngle-结束角度，anticlockwise-true为逆时针、false为顺时针（注，较早的Firefox beta中为clockwise）
angles（角度）在arc之中是以弧度为基准，不是度数（Angles in the arc function are measured in radians, not degrees.），转换可用此表达式：
var radians = (Math.PI/180)*degrees

quadraticCurveTo(cp1x, cp1y, x, y); //绘制二次曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); //绘制贝赛尔曲线
cp1、cp2两组参数是用来控制角度的点的坐标

quadraticCurveTo()只用一个点来控制，而bezierCurveTo()则需要两个，不过曲线会比较容易控制。我不太懂图像知识，看下例子就可以了解：
quadraticCurveTo example、bezierCurveTo example

rect(x, y, width, height); //绘制矩形

fill(); //填充路径绘制的区域，自动关闭路径
stroke(); //绘制线条，需要手动关闭路径

Path所有方法都需要fill()或stroke()来绘制，否则是没东西显示的，类似OOP的new
fillRect(),strokeRect()实质是用rect()描绘区域之后分别用fill()和stroke()绘制，而rect则是多个lineTo()的集合

styles and colors 样式和颜色：

fillStyle = color //设置填充颜色
strokeStyle = color //设置线条颜色
赋值方式:

1. // 全部皆是将fillStyle设置为橙色
2. ctx.fillStyle = "orange";
3. ctx.fillStyle = "#FFA500";
4. ctx.fillStyle = "rgb(255,165,0)";
5. ctx.fillStyle = "rgba(255,165,0,1)";

globalAlpha = transparency value //设置透明度
在改变之前所绘制的内容仍会保持原来的透明度，改变之后绘制的所有内容会使用该值，直到被改变，所以要表现比较华丽的透明效果就要多注意

lineWidth = value //线宽
lineCap = type //线条的顶端样式，根据设置线条总长度可能会增加，mozilla给出例子的值有butt、round、square（不确定是否有其他值）
lineJoin = type //线条间接合出的样式，mozilla给出例子的值有round、bevel、miter（不确定是否有其他值）
miterLimit = value //如果lineJoin设置为miter，这个属性才有作用，不太好解释，直接看官方demo，直观点：A canvas miterLimit example

以上只是一些简单的样式和颜色设置，测试过CSS对canvas有效的部分不算很好，比如直接设置color是改变不了线条颜色，background-color、border等倒可以使用

Image & Patterns 图像和图案：

drawImage(image, x, y); //在canvas中绘制图像，image为image或canvas对象，x、y是放置的坐标
drawImage(image, x, y, width, height); //重载方法之一，后面两个参数可以控制图像显示的大小
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); //重载方法之一，在目标对象（<canvas>）的dx、dy坐标开始的dWidth、dHeight的区域中绘制从image对象的sx、sy坐标开始裁剪出sWidht、sHeight大小的图

createPattern(image, type); //创建图案
image可以是image对象或其他的canvas元素；type是显示的方式，有四种值：repeat, repeat-x, repeat-y and no-repeat
类似Photoshop的笔刷，用指定图形对象填充，使用方式：

1. var ptrn = ctx.createPattern(img,'repeat');
2. ctx.fillStyle = ptrn;
3. ctx.fillRect(0,0,150,150);

图像处理的方法主要就是这4个，实现效果差不多，createPattern()简单得多，图像可定义的效果也比较少；drawImage()有三个重载方法，也够用了，配合循环也可以实现createPattern()的效果

Gradient 渐变处理：

createLinearGradient(x1, y1, x2, y2); //x、y是创建相关区域的开始和结束坐标
createRadialGradient(x1, y1, r1, x2, y2, r2); //x、y、r是两个圆的圆心坐标和半径，着色区域就是第一个圆和第二个圆的非交集部分
两者都是创建渐变区域，前者是线状，后者是放射状

addColorStop(position, color); //position的值在0.0~1.0之间，表示的是该颜色的开始地点，color的值是CSS颜色值

1. var lineargradient = ctx.createLinearGradient(0,0,150,150);
2. lineargradient.addColorStop(0,'white');
3. lineargradient.addColorStop(1,'black');

这个例子创建了一个从顶部（0-坐标0,0）的白色渐变到底部（1-坐标150,150）的黑色的线状渐变

1. var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
2. radgrad.addColorStop(0, '#A7D30C');
3. radgrad.addColorStop(0.9, '#019F62');
4. radgrad.addColorStop(1, 'rgba(1,159,98,0)');

这个例子分别创建一个圆心坐标45,45、半径10的小圆和一个圆心坐标52,50、半径30的大圆，然后从小圆外围开始以#A7D30C的颜色渐变到两 圆非交集部分的90%位置的#019F62，再渐变到大圆外围的rgba(1,159,98,0)。我表达可能不是很好，请自己运行一下例子看一下，很直观。

Shadow 阴影:

呃……Firefox 3.1(Gecko 1.9.1)声称会支持的东西，safari以后再测试，简单mark一下就好

shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color
OffsetX、Y是设置影子的位置，且不受当前变换矩阵的影响（these values aren't affected by the current transformation matrix）。负值使阴影向上或左，正值则向下或右，为0则使用默认值。
Blur指定模糊效果，该值不等于像素值且不受变换矩阵的影响（this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix）。默认为0。
Color使用标准的CSS颜色值，默认是完全透明的黑色（by default, it is fully-transparent black.）。

官方例子： 

1. function draw() {
2. var ctx = document.getElementById('canvas').getContext('2d');
3. ctx.shadowOffsetX = 2;
4. ctx.shadowOffsetY = 2;
5. ctx.shadowBlur = 2;
6. ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
7. 
   
8. ctx.font = "20px Times New Roman";
9. ctx.fillStyle = "Black";
10. ctx.fillText("Sample String", 5, 30);
11. }

  效果图： （图片裁剪过）

------------------------------------------------

暂且到这里吧，后面还有Transformations（变换？）和Base animations（基础动画），有空再一一更新。
有部分专业名词不太熟悉，有错请见谅。

用<canvas>需要掌握层次关系,后画的会覆盖前画的(如果有相交),而且没有图层概念,个人觉得比较重要的是lineTo(),arc()和两个曲线方法