HTML5 Canvas游戏开发（二）高级功能

　　一、变形

　　1、放大和缩小

　　scale（X，Y）函数。

　　当使用该函数时，其起始坐标值也被放大或缩小。当X、Y为负值时，可以实现翻转。

　　2、平移变换

　　translate（X，Y）函数。

　　表示水平方向向左移动，竖直方向向下移动。

　　3、旋转变换

　　rotate（角度）函数。

　　旋转一定角度，是以canvas的起始坐标坐标（0,0）为中心旋转。可使用translate修改canvas的中心。

　　4、setTransfrom函数实现倾斜效果

　　可使用transfrom（）函数代替上述三种函数的功能。

　　二、图形的渲染

　　1、线性渐变

　　使用createLinearGradient函数和addColorStop函数可以实现线性渐变。

　　createLinearGradient(x1,y1,x2,y2)

　　其中四个参数分别是渐变的出发点坐标（x1,y1）与终点坐标(x2,y2)。

　　addColorStop(position,color)

　　其中position表示从0.0到1.0之间的数值，表示渐变中颜色地点的相对低位；color参数表示渐变的颜色。

var grd = ctx.createLinearGradient(0,0,200,0);   线性渐变
grd.addColorStop(0.2,"#00ff00");
grd.addColorStop(0.8,"#ff0000");
ctx.fillStyle = grd;
ctx.fillRect(0,0,200,100);

 　　2、径向渐变

　　通过createRadialGradient函数和addColorStop函数实现径向渐变功能。

　　createRadialGradient(x0,y0,r0,x1,y1,r1)

　　其中，参数x0，y0表示开始圆的圆心坐标，r0为开始圆的直径；x1，y1为结束圆的圆心坐标，r0为结束圆的半径。

var grd = ctx.createRadialGradient(100,100,10,100,100,50);   径向渐变
grd.addColorStop(0,"#00ff00");
grd.addColorStop(1,"#ff0000");
ctx.fillStyle = grd;
ctx.fillRect(0,0,200,200);

　　3、颜色合成

　　globalCompositeOperation属性说明绘制到画布上的颜色如何与画布上的已有颜色组合起来。

ctx.fillStyle = "#00ff00";   //颜色合成
ctx.fillRect(10,10,50,50);
ctx.globalCompositeOperation = "source-over";
ctx.beginPath();
ctx.fillStyle = "#ff0000";
ctx.arc(50,50,30,0,2*Math.PI);
ctx.fill();

　　4、颜色反转

　　指的是对图形的每个像素进行颜色取反。

　　5、灰度控制

　　将图片变成灰色。

　　6、阴影效果

　　阴影的颜色可以通过shadowColor属性来指定。并且可以通过shadowOffsetX和shadowOffsetY属性来改变。应用到阴影边缘的羽化量可以通过shadowBlur属性来设置。

    ctx.shadowColor="#ff0000";
    ctx.shadowBlur=100;
    ctx.shadowOffsetX=20;
    ctx.shadowOffsetY=30;
    var image = new Image()
    image.src = "1.jpg";
    image.onload = function(){
        ctx.drawImage(image,0,0);
    }

　　下面讲述一个小案例的实现：一个画板。

　　代码连接如下：http://www.oschina.net/code/snippet_2685955_55850

　　当鼠标按下时调用down函数，将按下标记置为true。并且获取当前鼠标的位置。

　　当鼠标移动时调用draw函数。判断当按下标记为true时，获取新的鼠标位置，并开始画图。

　　当鼠标弹起时调用up函数。将按下标记置为false。