HTML5-Convas-APIs_屬性

☆ context.lineWidth
設定線寬，值，可以小於1，以像素為單位，單位是隱式的，賦值的時候不能帶單位名稱。預設值為1，但1在各瀏覽器中看起來大概為2像素，可能是因為使用了邊緣柔化技術（chrome14看起來不是柔化）。值若值<=0則變為預設的1。若值大於0小於1，則瀏覽器通常會減淡顏色顯示，但看仔細看仍是2像素；chrome14在值的範圍為(0, 0.25)時顯示有問題，大於等0.25顯示正常，且等於0.25則看起來是1像素，但有時候1像素的顏色很淡，甚至顯示不出來，可以設定略大於1的值（如1.01）來解決此問題；IE9在值的範圍為(0, 0.13)顯示有問題。若一個形狀內有填充，則填充會與線寬的一半疊加。如：
context.lineWidth = 4; //值不用帶單位，可以帶引號，也可以不帶

☆ context.lineJoin
設定路徑連接點的樣式，其值可以是round, bevel or miter (and the corresponding context.miterLimit value to tweak it）。如：
context.lineJoin = 'round';

☆ context.lineCap
設定線段端點類型，其值可以是 butt, square, or round

☆ context.strokeStyle
定義路徑繪圖樣式，其值可以是顏色、映像或漸層色等。如：
// Change the color to brown
context.strokeStyle = '#663300';

☆ context.fillStyle
設定填充樣式，可以是顏色、漸層和映像等，通常結合context.fill()方法使用。如：
// Set the fill color to green and fill the canopy
context.fillStyle = '#339900';
//漸層填充
context.fillStyle = gradientName;
context.fill();
//背景映像填充
context.fillStyle = context.createPattern(imgName, 'repeat');

☆ context.font
用於繪製文本時設定文本字型和字型樣式，用法同CSS相似，預設大小是10px，如：
context.font = "60px italic 華文行楷";

☆ context.textAlign
設定文本對其樣式，其值可以是start, end, left, right, center預設為start。如：
context.textAlign = 'center';

☆ textBaseline
設定文本的環繞樣式，其值可以是top, hanging, middle, alphabetic, ideographic, bottom。預設為alphabetic。

☆ 陰影與模糊屬性
陰影與模糊屬性可應用於路徑、填充區、文本和映像等任何繪圖對象。它們是如下的一組相關屬性：
(1)context.shadowColor:設定陰影顏色，可以是任意CSS顏色，包括透明度，如：
context.shadowColor = 'rgba(0, 0, 0, 0.2)';

(2)context.shadowOffsetX:設定對象陰影偏離對象本身的水平距離，正值向右偏，負值向左偏。如：
context.shadowOffsetX = 15;

(3)context.shadowOffsetY:設定對象陰影偏離對象本身的垂直距離，正值向下偏，負值向上偏。如：
context.shadowOffsetY = -10;

(4)context.shadowBlur:設定陰影的模糊程度，值越大越模糊。如：
context.shadowBlur = 2;

☆ context.globalAlpha
設定繪圖環境context的全域透明度，值在[0, 1]之間。如果之後的fillStyle或者strokeStyle帶有透明度，則會與globalAlpha的值複合，表現為值相乘。

☆ context.globalCompositeOperation
這個屬性指定了新繪製內容與（全部）已繪製內容的疊加和裁剪方式。它有11個值，預設值是source-over。
•source-over:新繪製內容在上。
•destination-over:已繪製內容在上。
•source-atop:新繪製內容在上，但是在新繪製內容中只有與已繪製內容疊加的部分才會顯示，其餘部分則被裁剪（也可以說是透明）而不會被顯示。已繪製內容全都顯示，但疊加的部分在下面。
•destination-atop:已繪製內容在上，但是在已繪製內容中只有與新繪製內容疊加的部分才會顯示，其餘部分則不會被顯示。新內容全都會顯示，但疊加的部分顯示在下面。
•source-in:新繪製內容中只有與已繪製內容疊加的部分會顯示，其餘部分則不顯示。已繪製內容都不會被顯示。疊加部分中已繪製內容的透明度將反作用於新繪製內容。
•destination-in:已繪製內容中只有與新繪製內容疊加的部分會顯示。其餘部分則不顯示。新繪製內容都不會被顯示。疊加部分中新繪製內容的透明度將反作用於已繪製內容。
•source-out:新繪製內容中沒有與已繪製內容疊加的部分都顯示。已繪製內容都不會被顯示。疊加部分中已繪製內容的透明度將反作用於新繪製內容。
•destination-out:已繪製內容中沒有與新繪製內容疊加的部分都顯示。新繪製內容都不會被顯示。疊加部分中新繪製內容的透明度將反作用於已繪製內容。
•lighter:疊加部分中，新繪製內容與舊繪製內容的顏色和透明度將複合，透明度越大疊加地區亮度越大，若兩者都不透明，疊加地區會呈白色。
•copy:新繪製內容完全顯示，已繪製內容完全不顯示。chrome14及以下不支援。
•xor:未疊加地區都會被顯示。疊加地區複合顯示，複合的結果由二者透明度決定，若二者都不透明，則疊加地區不顯示。