html5 canvas 學習筆記（一）

1、canvas元素API

　　 canvas元素並未提供不少API，實際上他只提供了兩個屬性與三個方法：

　　　　一、canvas元素屬性

　　　　　　width 屬性：與 height 屬性：

　　　　　　　canvas元素繪圖表面的寬度，在默認情況下，瀏覽器會將canvas元素大小設定成與繪圖表面大小一致，然而若是在css中覆寫了元素大小，那麼瀏覽器則會將繪圖表面進行縮放，使之符合元素尺寸。其值爲非負整數，默認值爲300.

　　　　二、canvas元素方法

　　　　　　getContext（）方法：

　　　　　　　　返回與該canvas元素相關的繪圖環境對象，每一個canvas元素均有一個這樣的環境對象，並且每一個環境對象均與一個canvas元素相關聯。

　　　　　　toDataURL（type,quality）方法：

　　　　　　　　返回一個數據地址（data URL），你能夠將他設定爲img與元素的src屬性值。第一個參數指定了圖像的類型，例如 image/jpeg或image/png，若是不指定第一個參數，則默認使用image/png。第　　　　　　　　二個參數必須是0~1.0之間的double值，他表示JPEG圖像的顯示質量。

　　　　　　toBlob（callback,type,args...）

　　　　　　　　建立一個用於表示此canvas元素圖像的Blob。第一個參數是一個回調函數，瀏覽器會以一個指向blob的引用爲參數，去調用該回調函數。第二個參數以「image/png」這樣的形式來指定圖像類型。若是　　　　　　　　不指定，則默認使用「image/png」最後一個參數是介於0.0~1.0之間的值，表示JPEG圖像的質量。未來極可能會加入其餘一些用於精確調控圖像屬性的參數

2、canvasrendingcontext2D對象所含的屬性

　　　　canvas  指向該繪圖環境所屬的canvas對象。該屬性最多見的的用途就是經過它來獲取canvas的寬度與高度，分別調用context.canvas.width與context.canvas.height便可

　　　　fillstyle  指定改繪圖環境在後續的圖形填充操做中所使用的顏色、漸變色或圖案

　　　　font   指定在調用繪圖環境對象的fillText（）或strokeText（）方法時，所使用的字型。

　　　　globalAlpha  全局透明度設定

　　　　globalCompsiteOperation 該值以爲了瀏覽器將某個物體繪製在其餘物體之上時，所採用的繪製方式。

　　　　lineCap 該值告訴瀏覽器如何繪製線段的端點，能夠指定的值爲butt、round、及square。默認值是butt。

　　　　lineWidth 該值決定了canvas之中繪製線段的屏幕像素寬度。它必須是個非負、非無窮的double值。

　　　　lineJoin  告訴瀏覽器在兩條線段相交是如何繪製焦點，可取的值是：bevel、round miter 默認值是miter。

　　　　miterLimit  告訴瀏覽器如何繪製miter形式的線段焦點

　　　　shadowBlur  該值決定了瀏覽器該如何延伸陰影效果。值越高，陰影效果延伸得就越遠。 默認值是0。

　　　　shadowColor  該值告訴瀏覽器使用何種顏色來繪製陰影。一般採用半透明色做爲該屬性的值，以便讓後面的背景能顯示出來

　　　　shadowOffsetX  以像素爲單位，指定陰影效果的水平方向偏移量

　　　　shadowOffsetY  以像素爲單位，指定陰影效果的垂直方向偏移量

　　　　strokeStyle  指定了對路徑進行描邊是所用的繪製風格。該值可被設定爲某個顏色，漸變色或圖案。

　　　　textAlign  決定了以fillText（）或strokeText（）方法進行繪製時，所畫文本的水平對其方式。

　　　　textBaseline  決定了fillText（）或strokeText（）方法進行繪製時，所畫文本的垂直對齊方式。