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