Canvas基础（二）

7.使Canvas填满浏览器窗口
Canvas中不支持百分比，可以将Canvas元素的宽度和高度精确设置为浏览器窗口的宽度和高度。
使用window浏览器对象和jQuery方法获取窗口的宽度和高度。
<script>
        $(window).resize(reiszeCanvas);   //resize:当浏览器窗口调整时触发resize方法
        function reiszeCanvas(){
            var canvas=$("#myCanvas");
            var context=canvas.get(0).getContext("2d");
            canvas.attr("width",$(window).get(0).innerWidth);
            canvas.attr("height",$(window).get(0).innerHeight);
            context.fillRect(0,0,canvas.width(),canvas.height());
        }
        reiszeCanvas();
    </script>

利用css填充显示的空白边框
css中：*{margin:0;padding:0}
       html,body{height:100%;width:100%}
       canvas{display:block;}
       
8.保存绘图状态
    context.save();
    调用多个save方法可以将状态逐一保存在栈中。
    
9.恢复绘图状态
    context.restore();
    从栈中取出保存的状态。
    
10.变形
    10.1 平移
    平移中移动的是2D渲染上下文的坐标原点，而不是所绘制的对象。
    平移：context.translate(100,100);
    平移之后搜绘制图形的原点为平移的点。
    10.2 缩放
    context.scale(x,y);其中x,y代表的是缩放的倍数，缩放会影响之后绘制的图形
    如果想要缩放一个图形并不影响之后绘制的图形，可以使用scale，restore和translate组合方法
    context.save(); //保存画布状态
    context.translate(100,100);  //将原点平移到(100,100)
    context.scale(2,2);  //将画布放大2倍
    context.fillRect(0,0,100,100);  //绘制图形
    context.restore();  //恢复保存的状态
    context.fillRect(0,0,50,50);  //新绘制的图形不受之前的变形的影响
    10.3 旋转
    旋转并非是图形本身，而是图形绕着其原点进行旋转，如果要只旋转一个图形，要使用translate的方法将上下文的原点平移到图形的中心。
    context.translate(200,200);    
    context.rotate(Math.PI/4); //旋转45度
    context.fillRect(0,0,100,100);
    10.4 变换矩阵
    变换矩阵：所使用的所有变形方法都会影响一个东西。在画布中使用一个3*3的矩阵
    [a c e] [x轴缩放 x轴倾斜 x轴平移]
    [b d f]=[y轴倾斜 y轴缩放 y轴平移]
    [0 0 1] [0       0       1      ]
    矩阵的默认值是一个单位矩阵(完全未执行过变形)
    [1  0  0]
    [0  1  0]
    [0  0  1]
        10.4.1 操作变换矩阵
         执行平移和缩放：transform(a,b,c,d,e,f);
         重置为单位矩阵：context.setTransform(1,0,0,1,0,0);
         练习：通过操作变换矩阵执行倾斜和缩放实现图形的旋转
         context.setTransform(1,0,0,1,0,0); //重置为单位矩阵
         var xScale=Math.cos(Math.PI/4);
         var ySkew=-Math.sin(Math.PI/4);
         var xSkew=Math.sin(Math.PI/4);
         var yScale=Math.cos(Math.PI/4);
         var xTrans=200;
         var yTrans=200;
         context.transform(xScale,ySkew,xSkew,yScale,xTrans,yTrans);
         context.fillRect(0,0,100,100);
        
    10.4 合成
    10.4.1 全局阿尔法值
    globalAlpha:设置透明度，值在0.0（全透明）到1.0（不透明）之间，默认值为1.0
    context.globalAlpha=0.5;
    10.4.2 合成操作
    源：绘制的新图形
          context.globalCompositeOperation="source-over";  //源(新绘制的图形)覆盖于目标之上
          context.globalCompositeOperation="destination-over";  //源在目标之下
          context.globalCompositeOperation="source-atop"; //不在重合区之外的的源是透明的
          context.globalCompositeOperation="destination-atop";  //不在重合区之外的的目标是透明的
          context.globalCompositeOperation="source-in"; //除了重合区中的源，其他区域都是透明的
          context.globalCompositeOperation="destination-in";  //除了重合区中的目标，其他区域都是透明的
          context.globalCompositeOperation="source-out"; //除了源中非重合区域，其他区域都是透明的
          context.globalCompositeOperation="destination-out";  //除了目标中的非重合区域，其他区域都是透明的
          context.globalCompositeOperation="lighter";  //重合区域的颜色值相加
          context.globalCompositeOperation="copy";  //只绘制源，覆盖掉目标
          context.globalCompositeOperation="xor";  //重叠处为透明
    
    
    10.5阴影
        context.shadowBlur=20;  //阴影的模糊值
        context.shadowOffsetX=10;  //阴影右下移
        context.shadowOffsetY=10;
        context.shadowColor="pink";  //阴影的颜色