繪製圖形

1、canvas基礎                                                   
canvas：至關於一個畫布。ID,width,heighr
獲取canvas元素 -> 得到上下文(canvas對象的getContext) -> 填充與繪製邊框(fill,stroke) -> 設定樣式(lineWidth,fillStyle,strokeStyle) -> 繪製(context.fillRect(x,y,width,height))
如：
<canvas id=canvas width=300 height=300/>
<script>
var canvas=document.getElementById("canvas");
if(canvas==null)return;
var context=canvas.getContext('2d');//必須傳'2d',不能'3d'
context.fillStyle="red";//顏色也能夠是rgb或rgba形式
context.fillRect(0,0,200,200);//填充矩形

context.strokeStyle="blue";
context.lineWidth=1;
context.strokeRect(0,0,200,200);//畫矩形

context.clearRect(50,50,100,100);//清空矩形區域
</script>
二、使用路徑                                                        
開始建立路徑：context.beginPath();
建立圖形路徑：
context.arc(x,y,radius,starAngle,endAngle,anticlockwise);//建立圓形路徑
參數：x,y,半徑,開始弧度，結束弧度，是否順時針。
關閉路徑：context.cosePath();
設置繪製樣式，進行繪製。
如:for(var i=0;i<10;i++){
context.beginPath();
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.closePath();
context.fillStyle='rgba(255,0,0,0.25)';//rgba最後一個參數爲透明度
context.fill();
}

moveTo與lineTo:繪製直線，moveTo參數爲起點，lineTo指定終點進行繪製，下一次的起點爲上一次的終點。
如：//繪製複雜圖形
context.beginPath();
context.fillStyle='rgb(100,255,100)';
context.strokeStyle='rgb(0,0,100)';
var x=Math.sin(0);
var y=Math.cos(0);
var dig=Math.PI/15*11;
for(var i=0;i<30;i++){
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
context.lineTo(350+100*x,350+100*y);
}
context.closePath();
context.fill();
context.stroke();
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y):繪製貝濟埃曲線，lineTo的曲線版。
參數：第一個控制點，第二個控制點，終點
quadraticCurveTo繪製二次樣條曲線，只須要一個控制點。
三、繪製漸變圖形                                                    
線性漸變：
建立對象： var g=context.createLinearGradient(xStart,yStart,sEnd,yEnd)
設置漸變色：g.addColorStop(offset,color),offset是離起點的偏移量(0,1)
設定fillStyle：context.fillStyle=g;
徑向漸變：
createRadialGratient(xStart,yStart,radiusStart,sEnd,yEnd,radiusEnd);
四、繪製變形圖形                                                    
座標變換：
平移：context.translate(x,y);//x；向左，y:向下。
擴大：context.scale(x,y)
旋轉：context.rotate(angle);//angle爲旋轉的角度。
座標變換與路徑的結合使用：
建立路徑的代碼抽象到一個方法中，把context傳進去。
矩陣變換：context.transform.
五、圖形組合                                                       
圖形上下文對象的globalCompositeOperation屬性決定組合方式，用法以下：
context.globalCompositeOperation=type;//
type的值是下面集中字符串之一：
source-over(默認)：圖形覆蓋在原有圖形之上。
destination-over：在原有圖形之下繪製新圖形。
source-in:新圖與原有圖形做in運算，只顯示新圖中與原有圖形重疊部分。
destination-in:原圖與新圖做in運算，只顯示原圖中與新圖重疊部分。
source-out:新圖與原圖做out運算，只顯示新圖中與原圖不重疊的部分。
destination-out:原圖與新圖做out運算，只顯示原圖中與新圖不重疊部分。
source-atop:只繪製新圖中與原圖重疊的部分與未被重疊覆蓋的原有圖形。
destination-atop:只繪製原圖中被重疊覆蓋的部分與新圖的其餘部分。
lighter:原圖和新圖均繪製，重疊部分加色處理。
xor:只繪製不重疊部分，重疊部分透明。
copy:只繪製新圖，原圖中未與新圖重疊部分變成透明。
六、給圖形繪製陰影                                               
用上下文幾個關於陰影繪製的屬性。
shadowOffsetX:陰影的橫向位移量。
shadowOffsetY:陰影的縱向位移量。
shadowColoe:陰影的顏色。
shadowBlur:陰影的模糊範圍。
七、使用圖像                                                        
繪製：context.drawImage(image,x,y[w,h,[dx,dy,dw,dh]]);
建立image的方法：image=new Image();image.src="1.jpg";
大圖像繪製：image.onload=function(){繪製圖像}
平鋪：context.createPattern(image,type);
type取值：no-repeat,repeat-x,repeat-y,repeat.
圖形裁剪：在畫布內使用路徑，只繪製路徑包括的區域。
建立好路徑後調用context.clip()來實現。
像素處理：getImageData獲取圖像中的像素。
var imagedata=context.getImageData(sx,sy,sw,sh);//參數爲起點座標，獲取區域寬度和高度。
imagedata是一個CanvasPixelArray對象，有height,width,data等屬性，data是一個數組
putImagData(imagedata,dx,dy[,dirtyX,dirtyY,dirtyWidth,dirtyHeight]);從新繪製在畫板上。
只有部分瀏覽器支持。
八、繪製文字                                                         
fillText(text,x,y,[maxWidth]);
strokeText
文字屬性：
font:字體,如contet.font="italic 30px sans-serif"
textAlign:水平對齊方式，start(默認),end,left,right,center.
textBaseline:垂直對齊方式，top,hanging,middle,alphabetic(默認),ideographic,bottom.
獲取文字的寬度：metrics=context.measureText(text); metrics的width表示text文字總文字寬度。
九、補充                                                                
保存與恢復狀態：
save,restore分別保存與恢復圖形上下文的當前會話狀態。
保存文件：
把當前會話狀態輸出到一個data URL地址所指向的數據中。
canvas.toDataURL(type);//type爲要輸出數據的MIME類型。
簡單動畫的製做：實際是一個不斷擦除,重繪的過程。
編寫繪圖函數，在函數中調用clearRect方法擦除。
用setInterval調用繪圖函數。