4.3　定義樣式和顏色

canvas支持很多顏色和樣式選項，如線型、漸變、圖案、透明度和陰影。本節將介紹樣式的設置方法。

4.3.1　顏色

視頻講解

使用fillStyle和strokeStyle屬性可以給圖形上色。其中，fillStyle設置圖形的填充顏色，strokeStyle設置圖形輪廓的顏色。

顏色值可以是表示CSS顏色值的字符串，也可以是漸變對象或者圖案對象（參考下面小節介紹）。默認情況下，線條和填充顏色都是黑色，CSS顏色值為#000000。

一旦設置了strokeStyle或fillStyle的值，那么這個新值就會成為新繪制的圖形的默認值。如果要給每個圖形定義不同的顏色，就需要重新設置fillStyle或strokeStyle的值。

【示例1】本例使用嵌套for循環繪制方格陣列，每個方格填充不同色，效果如圖4.15所示。

在嵌套for結構中，使用變量i和j為每個方格產生唯一的RGB色彩值，其中僅修改紅色和綠色通道的值，而保持藍色通道的值不變。可以通過修改這些顏色通道的值來產生各種各樣的色板。通過增加漸變的頻率，可以繪制出類似Photoshop調色板的效果。

【示例2】下面示例與示例1有點類似，但使用strokeStyle屬性，畫的不是方格，而是用arc()方法畫圓，效果如圖4.16所示。

圖4.15　繪制漸變色塊

圖4.16　繪制漸變圓圈

4.3.2　不透明度

視頻講解

使用globalAlpha全局屬性可以設置繪制圖形的不透明度，另外也可以通過色彩的不透明度參數來為圖形設置不透明度，這種方法相對于使用globalAlpha屬性來說，會更靈活些。

使用rgba()方法可以設置具有不透明度的顏色，用法如下。

    rgba(R,G,B,A)

其中R、G、B將顏色的紅色、綠色和藍色成分指定為0～255的十進制整數，A把alpha（不透明）成分指定為0.0和1.0之間的一個浮點數值，0.0為完全透明，1.0為完全不透明。例如，可以用"rgba(255,0,0,0.5)"表示半透明的完全紅色。

【示例1】下面示例使用四色格作為背景，設置globalAlpha為0.2后，在上面畫一系列半徑遞增的半透明圓，最終結果是一個徑向漸變效果，如圖4.17所示。圓疊加得越多，原先所畫的圓的透明度會越低。通過增加循環次數，畫更多的圓，背景圖的中心部分會完全消失。

圖4.17　用globalAlpha設置不透明度

【示例2】本例與示例1類似，不過不是畫圓，而是畫矩形。這里還可以看出，rgba()可以分別設置輪廓和填充樣式，因而具有更好的可操作性和使用靈活性，效果如圖4.18所示。

圖4.18　用rgba()方法設置不透明度

具體代碼解析請掃碼學習。

線上閱讀

4.3.3　實線

視頻講解

1．線的粗細

使用lineWidth屬性可以設置線條的粗細，取值必須為正數，默認為1.0。

【示例1】下面示例使用for循環繪制了12條線寬依次遞增的線段，效果如圖4.19所示。

2．端點樣式

lineCap屬性用于設置線段端點的樣式，包括三種樣式：butt、round和square，默認值為butt。

【示例2】下面示例繪制了三條藍色的直線段，并依次設置上述三種屬性值，兩側有兩條紅色的參考線，以方便觀察，預覽效果如圖4.20所示。可以看到這三種端點樣式從上到下依次為平頭、圓頭和方頭。

圖4.19　lineWidth示例

圖4.20　lineCap示例

3．連接樣式

lineJoin屬性用于設置兩條線段連接處的樣式，包括三種樣式：round、bevel和miter，默認值為miter。

【示例3】下面示例繪制了三條藍色的折線，并依次設置上述三種屬性值，觀察拐角處（即直線段連接處）樣式的區別。在瀏覽器中的預覽效果如圖4.21所示。

4．交點方式

miterLimit屬性用于設置兩條線段連接處交點的繪制方式，其作用是為斜面的長度設置一個上限，默認為10，即規定斜面的長度不能超過線條寬度的10倍。當斜面的長度達到線條寬度的10倍時，就會變為斜角。如果lineJoin屬性值為round或bevel時，miterLimit屬性無效。

【示例4】通過下面示例可以觀察當角度和miterLimit屬性值發生變化時斜面長度的變化。在運行代碼之前，也可以將miterLimit屬性值改為固定值，以觀察不同的值產生的結果，效果如圖4.22所示。

圖4.21　lineJoin示例

圖4.22　miterLimit示例

4.3.4　虛線

視頻講解

使用setLineDash()方法和lineDashOffset屬性可以定義虛線樣式。setLineDash()方法接收一個數組來指定線段與間隙的交替，lineDashOffset屬性設置起始偏移量。

【示例】下面示例繪制一個矩形虛線框，然后使用定時器設計每隔0.5秒重繪一次，重繪時改變lineDashOffset屬性值，從而創建一個行軍蟻的效果，效果如圖4.23所示。

圖4.23　設計動態虛線框

4.3.5　線性漸變

視頻講解

要繪制線性漸變，首先使用createLinearGradient()方法創建canvasGradient對象，然后使用addColorStop()方法進行上色。

createLinearGradient()方法的用法如下所示：

    context.createLinearGradient(x0,y0,x1,y1);

參數說明如下：

　x0：漸變開始點的x坐標。

　y0：漸變開始點的y坐標。

　x1：漸變結束點的x坐標。

　y1：漸變結束點的y坐標。

addColorStop()方法的用法如下所示：

    gradient.addColorStop(stop,color);

參數說明如下：

　stop：介于0.0與1.0的值，表示漸變中開始與結束之間的相對位置。漸變起點的偏移值為0，終點的偏移值為1。如果position值為0.5，則表示色標會出現在漸變的正中間。

　color：在結束位置顯示的CSS顏色值。

【示例】下面示例演示如何繪制線性漸變。在本例中共添加了8個色標，分別為紅、橙、黃、綠、青、藍、紫、紅，預覽效果如圖4.24所示。

圖4.24　繪制線性漸變

使用addColorStop()方法可以添加多個色標，色標可以在0～1任意位置添加，例如，從0.3處開始設置一個藍色色標，再在0.5處設置一個紅色色標，則0～0.3都會填充為藍色。0.3～0.5為藍色到紅色的漸變，0.5～1則填充為紅色。

4.3.6　徑向漸變

視頻講解

要繪制徑向漸變，首先需要使用createRadialGradient()方法創建canvasGradient對象，然后使用addColorStop()方法進行上色。

createRadialGradient()方法的用法如下。

    context.createRadialGradient(x0,y0,r0,x1,y1,r1);

參數說明如下：

　x0：漸變的開始圓的x坐標。

　y0：漸變的開始圓的y坐標。

　r0：開始圓的半徑。

　x1：漸變的結束圓的x坐標。

　y1：漸變的結束圓的y坐標。

　r1：結束圓的半徑。

【示例】下面示例使用徑向漸變在畫布中央繪制一個圓球形狀，預覽效果如圖4.25所示。

圖4.25　繪制徑向漸變

4.3.7　圖案

視頻講解

使用createPattern()方法可以繪制圖案效果，用法如下所示。

    context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

參數說明如下：

　image：規定要使用的圖片、畫布或視頻元素。

　repeat：默認值。該模式在水平和垂直方向重復。

　repeat-x：該模式只在水平方向重復。

　repeat-y：該模式只在垂直方向重復。

　no-repeat：該模式只顯示一次（不重復）。

創建圖案的步驟與創建漸變有些類似，需要先創建出一個pattern對象，然后將其賦予fillStyle屬性或strokeStyle屬性。

【示例】下面示例以一幅png格式的圖像作為image對象用于創建圖案，以平鋪方式同時沿x軸與y軸方向平鋪。在瀏覽器中的預覽效果如圖4.26所示。

圖4.26　繪制圖案

4.3.8　陰影

視頻講解

創建陰影需要4個屬性，簡單說明如下：

　shadowColor：設置陰影顏色。

　shadowBlur：設置陰影的模糊級別。

　shadowOffsetX：設置陰影在x軸的偏移距離。

　shadowOffsetY：設置陰影在y軸的偏移距離。

【示例】下面示例演示創建文字陰影效果，如圖4.27所示。

圖4.27　為文字設置陰影效果

4.3.9　填充規則

視頻講解

前面介紹了使用fill()方法可以填充圖形，該方法可以接收兩個值，用來定義填充規則。取值說明如下：

　"nonzero"：非零環繞數規則，為默認值。

　"evenodd"：奇偶規則。

填充規則根據某處在路徑的外面或者里面來決定該處是否被填充，這對于路徑相交或者路徑被嵌套的時候是有用的。

【示例】下面示例使用evenodd規則填充圖形，則效果如圖4.28所示，默認填充效果如圖4.29所示。

圖4.28　evenodd規則填充

圖4.29　nonzero規則填充