線條
var convas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
canvas.width
canvas.height
canvas.getContext('2d');
lineWidth? ? //線條寬度
strokeStyle? //邊框色
fillStyle? ? //填充色
stroke()? ? //邊框谆扎、線條繪制
fill()? ? ? //填充繪制
rect(x,y,width,height)? //繪制矩形
fillrect(x,y,widht,height)? //繪制填充矩形
strokeRect(x,y,width,height)? //繪制邊框矩形
==============================================
線條屬性
lineWidth
//線條兩端的冒子樣式
lineCap = 'butt' (default)
'round'? //圓形冒子
'square'? //方形冒子
//線條相接的樣式
lineJoin = 'miter' (default)? //尖角
'bevel'? //斜街的形式
'round'? //圓角的形式
miterLimit
==============================================
圖像變換
save()? //保存繪圖狀態(tài)
restore()? //恢復繪圖狀態(tài)
translate(x,y)? //位移
rotate(deg)? //旋轉(zhuǎn)
scale(sx,sy)? //縮放
變換矩陣：
a? c? e
b? d? f
0? 0? 1
a,d? 水平 垂直縮放
b,c? 水平 垂直傾斜
e,f? 水平 垂直位移
transform(a,b,c,d,e,f)? //疊加在之前的變換效果之上
setTransform(a,b,c,d,e,f)? //之前的變換效果都失效兼搏，重新設(shè)置變換效果
==============================================
填充樣式? fillStyle? strokeStyle適應(yīng)fillStyle所有的值
線性漸變 Linear Gradient
var grd = context.createLinearGradient(xstar,ystar,xend,yend);? //創(chuàng)建漸變線條
grd.addColorStop(stop,color);? //關(guān)鍵顏色
線性漸變 Radial Gradient
var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);? //創(chuàng)建漸變線條? 在兩個圓點與半徑之間
grd.addColorStop(stop,color);? //關(guān)鍵顏色
createPattern(img,repeat-style);? //圖片填充
createPattern(canvas,repeat-style);? //畫布填充
createPattern(video,repeat-style);? //音頻填充
==============================================
曲線繪制
圓
context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false);
圓弧
context.moveTo(x0,y0);
context.arcTo(x1,y1,x2,y2,radius);
貝塞爾二次曲線? http://tinyurl.com/html5quadratic
context.moveTo(x0,y0);
context.quadraticCurveTo(x1,y1,x2,y2);
貝塞爾三次曲線? http://tinyurl.com/html5bezier
context.moveTo(x0,y0);
context.bezierCurveTo(x1,y1,x2,y2,x3,y3);
==============================================
文字渲染
context.font = 'bold 40px Arial'
context.fillText(string,x,y,[maxlen]);
context.strokeText(string,x,y,[maxlen]);
font
默認值：'20px sans-serif'
context.font =
font-style font-variant font-weight font-size font-family
font-style = bold / italic (斜體字) / oblique (傾斜字體)
font-variant = normal / small-caps (小型的大寫字母)
font-weight = lighter / normal / bold / bolder
context.textAlign = left / center / right
context.textBaseline = top / middle / bottom? (中文字)
alphabetic / ideographic / hanging? (英文字)
文本的度量
context.measureText(string).width;
==============================================
陰影
context.shadowColor
context.shadowOffsetX
context.shadowOffsetY
context.shadowBlur
globalAlpha = 1 (default)
globalCompositeOperation = 'source-over' (defalut0
source-atop
source-in
source-out
destination-over
destination-atop
destination-in
destination-out
lighter / copy? / xor
剪輯區(qū)域
context.clip();
非零環(huán)繞原則? 制作剪紙效果
context.cleatRect(x,y,width,height);? //清空canvas屏幕
context.isPointInPath(x,y);? //檢測坐標點是否在路勁內(nèi)
==============================================
canvas 標準
W3C? ? ? ? http://www.w3.org/TR/2dcontext/
WHATWG? ? http://html.spec.whatwg.org/
context.ellipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle,false);? //橢圓
==============================================
Canvas與IE6、7娘侍、8等瀏覽器的兼容問題
exploercanvas? ? http://code.google.com/p/exploercanvas/
==============================================
Canvas圖形庫
canvasplus
http://code.google.com/p/canvasplus/
Artisan JS
http://artisanjs.com/
Rgraph
http://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph/
