canvas(二) 复合变形

一，canvas
    1，全局复合图形操作
       ctx.globalCompositeOperation = type;
       type用于设置新图形与原有图形的融合
       type取值：
            两种前缀：
                以原图为准使用destination-
                以新图为准使用source-


            destination-over:原图覆盖新图
            source-over:新图覆盖原图


            destination-in:仅仅显示重叠部分，原图颜色；
            source-in:仅仅显示重叠部分，新图颜色；


            destination-out:仅仅显示不重叠部分，原图的
            source-out:仅仅显示不重叠部分，新图的


            destination-atop:重叠部分保留，原图覆盖新图，原图不重叠部分消失
            source-atop:重叠部分保留，新图覆盖原图，新图不重叠部分消失


            lighter:叠加部分做加色处理
            darken:重叠部分做减色处理
            xor:重叠部分变透明
            copy:新图留下，其他消失
    2,变形
        画布中的变形都是ctx的变形，不是元素
        3种：
            1）ctx.translate(100,100)
                坐标系平移，图形的坐标没有变，会跟随坐标系的移动而移动
            2)ctx.rotate(1);//旋转1弧度
                旋转弧度，（公转，绕着坐标原点旋转）
            3)ctx.scale(1.5,2)//宽放大1.5倍，高2倍
                缩放变形
    3,绘制文本
        fillText(txt,x,y,maxWidth);
        strokeText(txt,x,y,maxWidth);
        font = 'bold 20px 微软雅黑';
        textAlign = 'left|center|right|start|end';
        textBaseline = 'top|middle|bottom|Alphabetic|Hanging';
    4,图像阴影
        ctx.shadowColor = 'red';//阴影颜色
        ctx.shadowBlur = 20;阴影模糊级别
        ctx.shadowOffsetX=5;//设置阴影在X轴发那个像距离图形的距离
ctx.shadowOffsetY=5;//设置阴影在Y轴方向距离图像的距离
    5,图片处理
        平铺：createPattern(img,type);
        img:图片
        type:repeat
            repeat-x|y
            no-repeat
        eg:
              ctx.fillStyle = ctx.createPattern(img,'repeat-x');
              ctx.fillRect(0,0,canvas.width,canvas.height);
        图像裁剪：ctx.clip();
            需要配合路径使用，先绘制好路径，然后调用clip
            注：
                一旦裁剪了某个区域，则之后的所有图形都被限制在这个区域，不能访问画布上的其他区域
            像素处理：
                getImageData(x,y,w,h);//可以指定获取指定区域内的像素点数据
                    x:x轴坐标
                    y:y轴坐标
                    w:指定区域的宽
                    h:指定区域的高
                putImageData(imgData,x,y);//将获取的数据重新放回画布上
                注：
                    必须服务器环境运行，不支持跨域
    6，图像输出
        这是一个canvas方法
        canvas.toDataURL(type,args);
        用来返回一个url地址，将canvas画布转为一张图片，这张图片是基于Base64编码的，如果不指定两个参数，无参调用该方法，转换的图像默认是png格式
        type:图片格式 image/png,image/jpg....
        args:如果type是image/jpeg,那么arges可以是0-1之间的值，表示指定的图像品质
        注：
            必须服务器环境运行，不支持跨域
    7,transform()
        添加一个新的变换矩阵
        ctx.transform(a,b,c,d,e,f);
            a,d 水平，垂直的缩放
            b,c 水平，垂直倾斜
            e,f 水平，垂直移动
        注：
            每当调用一次transform时，都会在前一个矩阵的基础上继续构造
    8，setTransform()
        重置并新建一个变形矩阵
        ctx.setTransform(a,b,c,d,e,f);
    9，save() & restore()
        绘制复杂图形必不可少的方法，分别用来保存恢复ctx的状态
    10，isPointInPath(x,y);
        测试给定的坐标是否位于当前路径之内
        返回值：true / false
        注：
            该方法仅仅对当前的路径有效