canvas基础之旅
canvas 主要使用2D rendering context API 实现其功能和特效。
canvas 一般浏览器都支持，但在ie9之前的是不支持的。（解决办法：添加IxplorerCanvas 脚本。）
学习canvas需要用到javscript和jQuery。
首先要引入jQuery库。
定义画布：
<script type="text/javascript">
var canvas = $("#mycanvas");
var context = canvas.get(0).getContext("2d");
</script>
画正方形：context.fillRect(x,y,width,height);(x,y)是正方形离坐标原点的距离，width,height是正方形的宽，高。
.strokeRect()也可以画正方形。同样是四个参数。
两者的区别是：.fillRect()画的正方形是有填充色的，但没有边框。
.strokeRect()画的正方没有填充色，但有边框。
画线条：lineTo();但不能直接像fillRect()那样调用。
要先调用一些其他的方法：
contex.beginPath();//开始路径
context.moveTo(x,y);//路径的起点坐标；
context.lineTo(x,y);//路径的终点坐标；
context.closePath();//结束路径；
context.stroke();//画出路径；
线和正方形的样式都可以调用相同的方法修改其样式:
.strokeStyle= "rgb()";修改形状和路径的填充颜色；
.lineWidth = 10；//修改形状的和路径的线宽；
4.保存和恢复图片
他们的机制值栈机制（先进后出）
保存：.save(),保存画布状态，通过多次调用save（），能够将绘制状态保存到栈中，最早的在栈的底部。
恢复：restore()，恢复画布状态；通过多次调用restore（）能够自动取出最初添加到栈中的绘图状态；
5.变形
5.1平移
translate(x,y);平移的是坐标的点，新的坐标点（x，y）=原来（x，y）+translate（x，y）；
会影响执行平移后的所有元素。
5.2缩放
scale（2,2），缩放的是倍数，不是像素，是（x，y）分别乘以2；
5.3旋转
rotate(0.7854) //Math.PI/4
旋转是以圆点坐标为中心点的，常常和translate( )一起使用
注意他们之间的顺序：
5.4变形矩阵
transform(2, 0, 2, 0, 150, 150) //(x轴缩放，y轴倾斜，x轴倾斜，y轴缩放，x轴平移，y轴平移)
6.合成
6.1 全局阿尔法值（透明度） //值会影响到修改之后所绘制的全部对象
globalAlpha = 0.5 //值在0~1之间
6.2 合成操作
globalCompositonOperation = " "; 共有11中方式，详情见《Canvas基础教程》
7.效果
7.1阴影
设置阴影通过4个全局属性控制：
.shadowBlur = 20 ; 阴影的模糊值
.shadowOffsetX; x轴上的偏移量；
.shadowOffsetY ,y轴上的偏移量；
.shadowColor = "rgba(0, 0, 0, 0.5)" ，阴影的颜色以及透明度（透明度）可设可不设；
7.2渐变
渐变的方式有两种：
createLinearGradient:线性渐变
都返回→→canvasGradient对象；
createRadiaGradient:放射性渐变 createRadialGradient方法，参数有（Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd），也就是说，它在实行渐变时，使用了两个圆，一个是原始的圆，一个是渐变式圆，其实，这种通过坐标与半径控制的方式可以实现很多样式，比如
var gradient = context.createLinearGradient(0, 0, 0, canvas.height( ) );//渐变起点的坐标（x, y），渐变终点的坐标（x， y）
gradient.addColorStop = (0, "rgb(0, 0, 0)" ); //渐变的起点以及颜色值；
gradient.addColorStop = (1, "rgb(0, 0, 0)"); //渐变的终点以及颜色值；（0表示渐变起点，1表示渐变终点）
context.fillStyle = gradient ;
context.fillRect(0, 0, canvas.width(), canvas.height() );
7.3贝塞尔曲线
quedraticCurveTo:二次贝塞尔曲线;quedraticCurveTo(cpx, cpy, x， y)，四个参数：（cpx, cpy）控制点坐标，（x, y）目标点坐标
bezierCurveT0:三次贝塞尔曲线;bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y),六个参数。
8画布与图像
8.1将画布导出为图像
将作为图像导出用toDataUrl方法：
context.save();
context.fillRect(20,20,50,50);
context.fillStyle = "rgb(255, 255, 0)";
context.fillRect(100, 100,50,50);
context.restore();
context.fillRect(200, 200,50,50);
var dataURL = canvas.get(0).toDataUrl;
或者
var dataURL = canvas.get(0).toDataUrl;
var img = $("<img></img>");
img.attr("src", dataURL);
canvas.replacWith(img);
8.2加载图片
将图像加载到画布上，调用drawImage方法：
conttext.drawImage(image, x, y);//(要绘制的图像，绘制图像的x坐标，绘制图像y坐标).
drawImage 调用的方法有两种，参数也不同：
var image = new Image( );
image.src = "aa.jpg";
$("image").load(function(){
conttext.drawImage(image, x, y)
})
8.3调整图像
context.drawImage(image, x, y, width, height)
8.4剪裁图像
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);(源图像，源图像的裁剪区域(x, y)坐标，源图像的裁剪区宽度和高度，目标图像的坐标(x, y)，绘制图像的宽度和高度)；
8.5图像阴影
context.shadowBluer = 20;
context.shadowColor = "rgb(255, 0, 0)";
var image = new Image();
image.src = "example.jpg";
$(image).load(function(){
context.drawImage(image, 100, 100, 200, 200);
});
但是对图片裁剪之后，图片的阴影会消失。
canvas基础之旅结束。2015/11/3
