html5 canvas 學習筆記（一）

標籤：style   ext   color   com   get   使用   

一、canvas元素API

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

　　　　1、canvas元素屬性

　　　　　　width 屬性：與 height 屬性：

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

　　　　2、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映像的品質。將來很可能會加入其他一些用於精確調控映像屬性的參數

二、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（）方法進行繪製時，所畫文本的垂直對齊。