html5学习 第一章canvas画布元素
1.javaScript通过ID来寻找元素canvas
var canvas=document.getElementById("canvaId");
2.通过canvas对象的getContext,并传入希望的完成的canvas的类型
var context=canvas.getContext("2d");
3.context 四个方法为 beginPath(), moveTo(x,y),lineTo(x,y),stroke()
beginPath()：表示绘画开始
moveTo(x,y):绘画起点坐标位置
lineTo(x,y):绘画终点坐标位置，不仅将当前的位置移动到新的目标(x,y),而且在两个坐标之前画一条直线（但不是真正的画线，只是起到标识的意思）
moveTo和lineTo其实并不画线，而是表示坐标位置；
stroke():画线，真正的把起点和终点连接起来并画线。
4. translate(x,y):平移，平移的方向是向右下方移动绘制上下文
save():保存当前的绘画状态
restore():恢复原有的绘画状态
例如：
var canvas=document.getElementById("canvaId");
var context=canvas.getContext("2d");
context.save();
context.translate(70,140);
context.beginPath();
context.moveTo(0,0);
context.lineTo(70,-70);
context.stroke();
context.restore();
说明：
由于context调用translate函数,所以当moveTo(0,0)平移的时候会被translate函数的里面的坐标追加上去；
moveTo(0+70,0+140)变成最终的moveTo(70,140);同样lienTo一样被追加上lienTo(70+70,-70+140)变成最终
lineTo(140,70);
由于之前平移了相当之前所说的moveTo 和lineTo并没有起到真正画线，所有要恢复之前的绘画状态调用restore()函数。
transForm(a,b,c,d,e,f): 变换矩阵；绘制一个矩行，通过transform添加一个新的矩阵,再次绘画一个矩阵;添加一个新的变换矩阵，然后再次绘制矩形。
注意，每次当你调用transform是,它都在前一个变换矩阵上构建。
transform 允许你 缩放，旋转，移动，并倾斜当前的环境；
注释:该变换只会影响transform()方法调用之后的绘图。
注释:transform()方法的行为相对由于 rotate(),scale(),translate(), or transform()完成的其他变换。
例如：如果你已经将绘图设置为两倍，则transform()方法会把绘图放大两倍，你的绘图将会放大四倍.
transform 参数：
a:水平缩放绘图
b.水平倾斜绘图
c:垂直倾斜绘图
d:垂直缩放绘图
e:水平移动绘图
f:垂直移动绘图
5. closePath():学名：闭合路径，这函数有点类似lineTo(),唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。
例子：
var canvas=document.getElementById("canvaId");
var context=canvas.getContext("2d");
context.beginPath();
context.moveTo(100,50);
context.lineTo(150,150);
context.lineTo(50,150);
context.closePath();
context.stroke();
说明:
如果把closePath注释掉，就是连接绘画成两条线，moveTo起始坐标到第一个lienTo,然后第一个lineTo到第二个lineTo;
保留closePath的话，基本上跟上closePath注释一样，但是最后要加上的是第二lineTo到moveTo起始位置，形成一个封闭的区域。
6. lineWidth:绘画线条的宽度
lienJoin:坐标与坐标之前的接洽点的平滑.(修改当前形状中线段的连接方式,让拐角度变得更加圆滑)，属性有: round(圆),bevel(水平),miter(斜切,相应的miterLimit 值也需要改变).
strokeStyle:改变线条的颜色属性。
lineCap:属性指定线段如何结束。只有绘制较宽线段时，它才有效。 默认值为:"butt"
butt:这个默认值指定了线段应该没有线帽。线条的末点是平直的而且和线条的方向正交，这条线段在其端点之外没有扩展.
round:这个值指定了线段应该带有一个半圆形的线帽，半圆的直径等于线段的宽度，并且线段在端点之外扩展了线段宽度的一半。
square:这个值表示线段应该带有一个矩形线帽。这个值和 "butt" 一样，但是线段扩展了自己的宽度的一半。
7.fill()：填充函数
fillStyle:填充样式
fillRect(x,y,width,height):填充一个矩形区域, 说明： x:矩形左上角的 x 坐标；y:矩形左上角的 y 坐标； width:矩形的宽度，以像素计； height:矩形的高度，以像素计
8.绘制曲线
quadraticCurveTo(x1,y1,x,y):二次曲线;说明 x,y是终点的坐标，而x1和y1是曲线的控制点，而起点仍然是之前讲的moveTo()起点坐标；
bezierCurveTo(x1,x1,x,y,x2,y2):贝塞尔曲线，几乎跟quadraticCurveTo一样;x,y是终点的坐标，x1,y1是控制点1的坐标，x2,y2是控制点2的坐标，而起点还是moveTo坐标。
arcTo
9.在canvas插入图片：drawImage(image,x,y),drawImage(image,x,y,width,height);
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight);
image:所绘制的图像，必须是<img>标记或者是屏幕外的image对象,或者是canvas的元素。
x,y:要绘制的图像的左上角的坐标
width,height:图像所应该绘制的尺寸，指定这些参数可以使图像自由的缩放
sourceX,sourceY:图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。
sourceWidth,soucreHeight:图像所要绘制区域的大小，用图像像素表示。
destX,destY:所要绘制的图像区域的左上角的画布坐标。
destWidth,destHeight:图像区域所要绘制的画布大小。
在canvas插入图片的时候必须要图片加载完才能进行操作；因为不这样做图片没有加载完，canvas是不会显示的任何图片的。
所以：
var back=new Image();
back.src="bark.jpg";
back.onload=function(){
drawTrails();
}
function drawTrails(){
var canvas=document.getElementById("canvasId");
var context=canvas.getContext('2d');
context.save();
context.beginPath();
context.drawImage(back,100,100,50,50);
context.stroke();
}
10.渐变
createLinearGradinet(x0,y0,x1,x1):方法创建线性的渐变对象。
有两点注意： a.请使用该对象作为strokeStyle和fillStyle属性的值，b.addColorStop方法规定不同的颜色；
说明：
x0:渐变开始点x的坐标
y0:渐变开始点y的坐标
x1:渐变结束点x的坐标
y1:渐变结束点y的坐标
addColorStop(offset,color):方法在渐变中的某一点添加一个颜色变化。
说明:
offset:这是一个范围在 0.0 到 1.0 之间的浮点值，表示渐变的开始点和结束点之间的一部分。offset 为 0 对应开始点，offset 为 1 对应结束点。
color:以一个 CSS 颜色字符串的方式，表示在指定 offset 显示的颜色。沿着渐变某一点的颜色是根据这个值以及任何其他的颜色色标来插值的。
使用渐变需要三个步骤：
a.创建渐变对象
b.为渐变对象设置颜色，指明过渡方式
c.在context上为填充样式或描边样式渐变
这两个渐变填充来(相应的函数为fillRect)矩形区域。
例子：
//创建渐变用做树干纹理的三阶水平渐变
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
//树干左侧边缘的颜色 0表示渐变的开始点
trunkGradient.addColorStop(0,'#663300');
//树干中间偏左位置的颜色 0.4表示渐变中间偏左的
trunkGradient.addColoStop(0.4,'#996600');
//树干右侧边缘的颜色 1表示渐变结束点
trunkGradient.addColorStop(1,'#552200');
//使用渐变色填充树干
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);
//接下来，创建垂直渐变，以用作树冠在树干的上投影
var canopyShadow=context.createLinearGradient(0,-50,0,0);
//投影渐变的起点透明度设为50%的黑色
canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
//方向垂直向下，渐变色在很短的距离内迅速渐变至完全透明，这段长度以外的树干上没有投影
canopyShadow.addColorStop(0.2,'rgba(0,0,0,0.0)');
//在树干上填充投影渐变
context.fillStyle=canopyShadow;
context.fillRect(-5,-50,10,50);
了解rgba css3样式
说明：rgba(Red,Green,Blue,Alpha):是代表Red(红色)、Green(绿色)、Blue（蓝色）和Alpha（通道）。
RGB值被指定使用3个8位无符号整数（0-255）来表示。alpha通道一般用作不透明度参数。当alpha数值为0时，那它就是完全透明；而数值为1时，则是完全不透明；当数值为0到1之间时，刚是半透明状态。
CreateRadialGradient(x0,y0,r0,x1,y1,r1):放射性的渐变：
前三个参数代表以(x0,y0)为圆心，r0为半径的圆，后三个参数代表以(x1,y1)为圆心,r1为半径的另一个圆.渐变会以两个圆中间的区域出现.
11.背景图
之前使用drawImage,现在使用CreatePattern代替
var gravel=new Image();
gravel.src='bag.jpg';
gravel.onload=function(){
drawTrails();
}
context.StrokeStyle=context.CreatePattern(gravel,'repeat‘);
context.Stroke();
绘制的时候还使用了Stroke()函数，只不过这次我们设置了context的StrokeStyle属性，把调用context.CreatePattern返回值赋给了该属性.
再次声明图片必须提前要加载完，以便Canvas后续工作。
CreatePattern第二个参数是重复标记:
repeat:(默认值)图片会以两个方向平铺
repeat-x:横向平铺
repeat-y:纵向平铺
no-repeat:图片只显示一次，不平铺
12. 缩放Canvas对象
context.Scale(scaleWidth,scaleHeight):直白的意思就是指当前绘图进行缩小或放大。
scaleWidth：缩放当前绘图的宽度(1=100%,0.5=50%,2=200% 以此类推);
scaleHeight:缩放当前绘图的高度(1=100%,0.5=50%,2=200% eto)
13. Canvas 变换
context.rotate(angle):旋转当前绘图的角度
angle：旋转角度，以弧度计
如需将角度转换为弧度，请使用 degrees*Math.PI/180公式计算
例如:需旋转5度，则 5*Math.PI/180
