Canvas 第二篇

前一篇讲到了一些canvas的基础知识，今天，咱们就来深入了解下canvas。

初次见到canvas，发现它的宽高都写在属性里，如：

<canvas width="800" height="600"></canvas>

但大家知道为什么它要这样写吗？如果写在css里， 那么改变的不仅仅是画布的大小，还有里面图片的正常尺寸。

画弧：
如果想画弧的话，起始角度和终点角度都得用弧度。

var oC=document.getElementById('c1'); var gd=oC.getContext('2d'); gd.arc(200,200,100,d2a(0),d2a(360),false); gd.stroke();

注：false 是顺时针，true是逆时针。

当你画的图形出现毛边的时候，可以用：
gd.beginPath() 来解决。

canvas文字

        gd.font=('50px 微软雅黑')
        gd.fillText('我是不是你最疼爱的人',x,y);
            //如果字体不存在  默认宋体

        gd.textAlign     //left|center|right
        gd.textBaseline    //top/bottom

canvas 写事件
区域检测 路径
gd.fillRect()不是路径，是图形，锁定不了区域。
所以要用：
gd.rect(); gd.fill().
isPointInPath 注意检测路径：

       oC.onclick = function(ev){
           if(gd.isPointInPath(ev.pageX,ev.pageY)){
               alert('ok');
           } else{
               alert('不ok');
           }
        };

jcscript 专门写事件的库
官网 http://jcscript.com/
下载库 jCanvaScript.1.5.18.min.js
api
注意1：
颜色使用16进制

canvas变换:
rotate
scale
translate

    rotate注意：
        1.必须是弧度
        2.旋转中心是左上角
        3.旋转的是画布
            如何沿着自身中心旋转
            gd.translate(x+2/w,y+h/2);
            gd.rotate(d2a());
            gd.fillRect(-w/2,-h/2,w,h)

            用法：你想沿着那个点旋转，你就得把图形的中心移到那个点去
        4.在canvas里
            translate scale  参数不能省略
            rotate
            在css3中 变换是覆盖的，在canvas里面 是叠加的

线的端点

1.lineCap
    butt    没有端点 和原来一样
    round   有圆的端点
    square  正常的端点

线的连接点

2.lineJoin
    miter   正常
    bevel   棱角
    round   圆角

canvas 注意

 width height 写在属性里
        加lineWidth  里面和边框各占一半

阴影

        gd.shadowOffsetX=10;
        gd.shadowOffsetY=10;
        gd.shadowBlur=50;
        gd.shadowColor='green';

线性渐变

        var linear = gd.createLinearGradient(100,100,200,200);//起点，终点坐标
        linear.addColorStop(0,'red');//添加停靠色
        linear.addColorStop(1,'green');//添加停靠色
        可以是多种颜色

径向渐变

        gd.createRadialGradient(x1,y1,r1,x2,y2,r2)

        linear.addColorStop(0,'red');//添加停靠色
        linear.addColorStop(1,'green');//添加停靠色

导出图片

        var res=oC.toDataURL();  //image/jpeg png
            window.open(res);

像素级操作 ****必须在服务器下使用
非常耗性能!!!
(r g b a) -> 255,0,0,127

        var result = gd.getImageData(0,0,oC.width,oC.height); //x,y,w,h
        gd.putImageData(result,0,0);

变灰

        d[i]=d[i+1]=d[i+2]=(d[i]+d[i+1]+d[i+2])/3;

复古

           var r=d[i];
           var g=d[i+1];
           var b=d[i+2];

          d[i]=(r*0.393)+(g*0.769)+(b*0.189); // red
          d[i+1]=(r*0.349)+(g*0.686)+(b*0.168); // green
          d[i+2]=(r*0.272)+(g*0.534)+(b*0.131); // blue

曝光

                d[i]+=200;
                d[i+1]+=200;
                d[i+2]+=200;

图片反转

                d[i]=255-d[i];
                d[i+1]=255-d[i+1];
                d[i+2]=255-d[i+2];

createPatern(oImg,重复方式) 平铺背景
要 oImg.onload

drawImage
drawImage(oImg,位置，位置)

            要 oImg.onload

drawImage 画图

            drawImage(oImg,sx，sy)
            drawImage(oImg,位置，位置)
            gd.drawImage(oImg,sx,sy，dw,dh);

            gd.drawImage{oImg,
                sx,sy,sw,sh,//取样
                dx,dy,dw,dh
            }

今天就说到这里。未完待续！