前一篇讲到了一些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
}
今天就说到这里。未完待续！
