到目前爲止,咱們只看到過繪製內容的方法。若是咱們想要給圖形上色,有兩個重要的屬性能夠作到:fillStyle
和 strokeStyle。
javascript
fillStyle = color
css
設置圖形的填充顏色。html
strokeStyle = color
java
設置圖形輪廓的顏色。canvas
color
能夠是表示 CSS 顏色值的字符串,漸變對象或者圖案對象。默認狀況下,線條和填充顏色都是黑色(CSS 顏色值 #000000
)。數組
輸入的應該是符合 CSS3 顏色值標準 的有效字符串。下面的例子都表示同一種顏色。app
// 這些 fillStyle 的值均爲 '橙色' ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; ctx.fillStyle = "rgb(255,165,0)"; ctx.fillStyle = "rgba(255,165,0,1)";
在本示例裏,用兩層 for
循環來繪製方格陣列,每一個方格不一樣的顏色。結果如右圖,但實現所用的代碼卻沒那麼絢麗。我用了兩個變量 i 和 j 來爲每個方格產生惟一的 RGB 色彩值,其中僅修改紅色和綠色通道的值,而保持藍色通道的值不變。你能夠經過修改這些顏色通道的值來產生各類各樣的色板。經過增長漸變的頻率,你還能夠繪製出相似 Photoshop 裏面的那樣的調色板。async
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <script type="text/javascript"> function draw() { var ctx = document.getElementById('myCanvas').getContext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ',0)'; ctx.fillRect(j * 25, i * 25, 25, 25) } } } </script> </head> <body onload="draw();"> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <canvas id="myCanvas" width="150" height="150"></canvas> <script src="" async defer></script> </body> </html>
效果如圖所示:工具
這個示例與上面的有點相似,但此次用到的是 strokeStyle
屬性,畫的不是方格,而是用 arc
方法來畫圓。動畫
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <script type="text/javascript"> function draw() { var canvas = document.getElementById('myCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ')'; ctx.beginPath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true); ctx.stroke(); } } } } </script> </head> <body onload="draw()"> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <canvas id="myCanvas" width="150" height="150" style="margin: 100px 100px;"></canvas> <script src="" async defer></script> </body> </html>
效果如圖所示:
除了能夠繪製實色圖形,咱們還能夠用 canvas 來繪製半透明的圖形。經過設置 globalAlpha
屬性或者使用一個半透明顏色做爲輪廓或填充的樣式。
globalAlpha = transparencyValue
這個屬性影響到 canvas 裏全部圖形的透明度,有效的值範圍是 0.0 (徹底透明)到 1.0(徹底不透明),默認是 1.0。
globalAlpha
屬性在須要繪製大量擁有相同透明度的圖形時候至關高效。不過,我認爲下面的方法可操做性更強一點。
由於 strokeStyle
和 fillStyle
屬性接受符合 CSS 3 規範的顏色值,那咱們能夠用下面的寫法來設置具備透明度的顏色。
// 指定透明顏色,用於描邊和填充樣式 ctx.strokeStyle = "rgba(255,0,0,0.5)"; ctx.fillStyle = "rgba(255,0,0,0.5)";
rgba()
方法與 rgb()
方法相似,就多了一個用於設置色彩透明度的參數。它的有效範圍是從 0.0(徹底透明)到 1.0(徹底不透明)。
在這個例子裏,將用四色格做爲背景,設置 globalAlpha
爲 0.2
後,在上面畫一系列半徑遞增的半透明圓。最終結果是一個徑向漸變效果。圓疊加得越多,原先所畫的圓的透明度會越低。經過增長循環次數,畫更多的圓,從中心到邊緣部分,背景圖會呈現逐漸消失的效果。
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <script type="text/javascript"> function draw() { var canvas = document.getElementById('myCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // 畫背景 ctx.fillStyle = '#FD0'; ctx.fillRect(0, 0, 75, 75); ctx.fillStyle = '#6C0'; ctx.fillRect(75, 0, 75, 75); ctx.fillStyle = '#09F'; ctx.fillRect(0, 75, 75, 75); ctx.fillStyle = '#F30'; ctx.fillRect(75, 75, 75, 75); ctx.fillStyle = '#FFF'; // 設置透明度值 ctx.globalAlpha = 0.2; // 畫半透明圓 for (var i = 0; i < 7; i++) { ctx.beginPath(); ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true); ctx.fill(); } } } </script> </head> <body onload="draw();"> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <canvas id="myCanvas" width="150" height="150"></canvas> <script src="" async defer></script> </body> </html>
效果如圖所示:
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <script type="text/javascript"> function draw() { var canvas = document.getElementById('myCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // 畫背景 ctx.fillStyle = 'rgb(255,221,0)'; ctx.fillRect(0, 0, 150, 37.5); ctx.fillStyle = 'rgb(102,204,0)'; ctx.fillRect(0, 37.5, 150, 37.5); ctx.fillStyle = 'rgb(0,153,255)'; ctx.fillRect(0, 75, 150, 37.5); ctx.fillStyle = 'rgb(255,51,0)'; ctx.fillRect(0, 112.5, 150, 37.5); // 畫半透明矩形 for (var i = 0; i < 10; i++) { ctx.fillStyle = 'rgba(255,255,255,' + (i + 1) / 10 + ')'; for (var j = 0; j < 4; j++) { ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5) } } } } </script> </head> <body onload="draw();"> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <canvas id="myCanvas" width="150" height="150"></canvas> <script src="" async defer></script> </body> </html>
效果如圖所示:
能夠經過一系列屬性來設置線的樣式。
lineWidth = value
設置線條寬度。
lineCap = type
設置線條末端樣式。
lineJoin = type
設定線條與線條間接合處的樣式。
miterLimit = value
限制當兩條線相交時交接處最大長度;所謂交接處長度(斜接長度)是指線條交接處內角頂點到外角頂點的長度。
getLineDash()
返回一個包含當前虛線樣式,長度爲非負偶數的數組。
setLineDash(segments)
設置當前虛線樣式。
lineDashOffset = value
設置虛線樣式的起始偏移量。
經過如下的樣例可能會更加容易理解。
lineWidth
屬性的例子這個屬性設置當前繪線的粗細。屬性值必須爲正數。默認值是1.0。
線寬是指給定路徑的中心到兩邊的粗細。換句話說就是在路徑的兩邊各繪製線寬的一半。由於畫布的座標並不和像素直接對應,當須要得到精確的水平或垂直線的時候要特別注意。
在下面的例子中,用遞增的寬度繪製了10條直線。最左邊的線寬1.0單位。而且,最左邊的以及全部寬度爲奇數的線並不能精確呈現,這就是由於路徑的定位問題。
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <script type="text/javascript"> function draw() { var ctx = document.getElementById('myCanvas').getContext('2d'); for (var i = 0; i < 10; i++) { ctx.beginPath(); ctx.lineWidth = 1 + i; ctx.moveTo(5 + i * 14, 5); ctx.lineTo(5 + i * 14, 140); ctx.stroke(); } } </script> </head> <body onload="draw();"> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <canvas id="myCanvas" width="150" height="150"></canvas> <script src="" async defer></script> </body> </html>
效果如圖所示:
lineCap
屬性的例子屬性 lineCap
的值決定了線段端點顯示的樣子。它能夠爲下面的三種的其中之一:butt
,round
和 square
。默認是 butt。
在這個例子裏面,我繪製了三條直線,分別賦予不一樣的 lineCap
值。還有兩條輔助線,爲了能夠看得更清楚它們之間的區別,三條線的起點終點都落在輔助線上。
最左邊的線用了默認的 butt
。能夠注意到它是與輔助線齊平的。中間的是 round
的效果,端點處加上了半徑爲一半線寬的半圓。右邊的是 square
的效果,端點處加上了等寬且高度爲一半線寬的方塊。
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <script type="text/javascript"> function draw() { var ctx = document.getElementById('myCanvas').getContext('2d'); var lineCap = ['butt', 'round', 'square']; // 建立路徑 ctx.strokeStyle = '#09f'; ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(140, 10); ctx.moveTo(10, 140); ctx.lineTo(140, 140); ctx.stroke(); // 畫線條 ctx.strokeStyle = 'black'; for (var i = 0; i < lineCap.length; i++) { ctx.lineWidth = 15; ctx.lineCap = lineCap[i]; ctx.beginPath(); ctx.moveTo(25 + i * 50, 10); ctx.lineTo(25 + i * 50, 140); ctx.stroke(); } } </script> </head> <body onload="draw();"> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <canvas id="myCanvas" width="150" height="150"></canvas> <script src="" async defer></script> </body> </html>
lineJoin
的屬性值決定了圖形中兩線段鏈接處所顯示的樣子。它能夠是這三種之一:round
, bevel
和 miter。
默認是 miter``。
這裏我一樣用三條折線來作例子,分別設置不一樣的 lineJoin
值。最上面一條是 round
的效果,邊角處被磨圓了,圓的半徑等於線寬。中間和最下面一條分別是 bevel 和 miter 的效果。當值是 miter
的時候,線段會在鏈接處外側延伸直至交於一點,延伸效果受到下面將要介紹的 miterLimit
屬性的制約。
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <script type="text/javascript"> function draw() { var ctx = document.getElementById('myCanvas').getContext('2d'); var lineJoin = ['round', 'bevel', 'miter']; ctx.lineWidth = 10; for (var i = 0; i < lineJoin.length; i++) { ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(-5, 5 + i * 40); ctx.lineTo(35, 45 + i * 40); ctx.lineTo(75, 5 + i * 40); ctx.lineTo(115, 45 + i * 40); ctx.lineTo(155, 5 + i * 40); ctx.stroke(); } } </script> </head> <body onload="draw();"> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <canvas id="myCanvas" width="150" height="150"></canvas> <script src="" async defer></script> </body> </html>
效果如圖所示:
用 setLineDash
方法和 lineDashOffset
屬性來制定虛線樣式. setLineDash
方法接受一個數組,來指定線段與間隙的交替;lineDashOffset
屬性設置起始偏移量.
在這個例子中,咱們要建立一個螞蟻線的效果。它每每應用在計算機圖形程序選區工具動效中。它能夠幫助用戶經過動畫的邊界來區分圖像背景選區邊框。
就好像通常的繪圖軟件同樣,咱們能夠用線性或者徑向的漸變來填充或描邊。咱們用下面的方法新建一個 canvasGradient
對象,而且賦給圖形的 fillStyle
或 strokeStyle
屬性。
createLinearGradient(x1, y1, x2, y2)
createLinearGradient 方法接受 4 個參數,表示漸變的起點 (x1,y1) 與終點 (x2,y2)。
createRadialGradient(x1, y1, r1, x2, y2, r2)
createRadialGradient 方法接受 6 個參數,前三個定義一個以 (x1,y1) 爲原點,半徑爲 r1 的圓,後三個參數則定義另外一個以 (x2,y2) 爲原點,半徑爲 r2 的圓。
var lineargradient = ctx.createLinearGradient(0,0,150,150); var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);
建立出 canvasGradient
對象後,咱們就能夠用 addColorStop
方法給它上色了。
gradient.addColorStop(position, color)
addColorStop 方法接受 2 個參數,position
參數必須是一個 0.0 與 1.0 之間的數值,表示漸變中顏色所在的相對位置。例如,0.5 表示顏色會出如今正中間。color
參數必須是一個有效的 CSS 顏色值(如 #FFF, rgba(0,0,0,1),等等)。
你能夠根據須要添加任意多個色標(color stops)。下面是最簡單的線性黑白漸變的例子。
var lineargradient = ctx.createLinearGradient(0,0,150,150); lineargradient.addColorStop(0,'white'); lineargradient.addColorStop(1,'black');
createLinearGradient
的例子本例中,有兩種不一樣的漸變。第一種是背景色漸變,你會發現,我給同一位置設置了兩種顏色,你也能夠用這來實現突變的效果,就像這裏從白色到綠色的突變。通常狀況下,色標的定義是無所謂順序的,可是色標位置重複時,順序就變得很是重要了。因此,保持色標定義順序和它理想的順序一致,結果應該沒什麼大問題。
第二種漸變,我並非從 0.0 位置開始定義色標,由於那並非那麼嚴格的。在 0.5 處設一黑色色標,漸變會默認認爲從起點到色標之間都是黑色。
你會發現,strokeStyle
和 fillStyle
屬性均可以接受 canvasGradient
對象。
這個例子,我定義了 4 個不一樣的徑向漸變。因爲能夠控制漸變的起始與結束點,因此咱們能夠實現一些比(如在 Photoshop 中所見的)經典的徑向漸變動爲複雜的效果。(經典的徑向漸變是隻有一箇中心點,簡單地由中心點向外圍的圓形擴張)
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <script type="text/javascript"> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // 建立漸變 var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30); radgrad.addColorStop(0, '#A7D30C'); radgrad.addColorStop(0.9, '#019F62'); radgrad.addColorStop(1, 'rgba(1,159,98,0)'); var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50); radgrad2.addColorStop(0, '#FF5F98'); radgrad2.addColorStop(0.75, '#FF0188'); radgrad2.addColorStop(1, 'rgba(255,1,136,0)'); var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40); radgrad3.addColorStop(0, '#00C9FF'); radgrad3.addColorStop(0.8, '#00B5E2'); radgrad3.addColorStop(1, 'rgba(0,201,255,0)'); var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90); radgrad4.addColorStop(0, '#F4F201'); radgrad4.addColorStop(0.8, '#E4C700'); radgrad4.addColorStop(1, 'rgba(228,199,0,0)'); // 畫圖形 ctx.fillStyle = radgrad4; ctx.fillRect(0, 0, 150, 150); ctx.fillStyle = radgrad3; ctx.fillRect(0, 0, 150, 150); ctx.fillStyle = radgrad2; ctx.fillRect(0, 0, 150, 150); ctx.fillStyle = radgrad; ctx.fillRect(0, 0, 150, 150); } </script> </head> <body onload="draw();"> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <canvas id="myCanvas" width="150" height="150"></canvas> <script src="" async defer></script> </body> </html>
效果如圖所示:
這裏,我讓起點稍微偏離終點,這樣能夠達到一種球狀 3D 效果。但最好不要讓裏圓與外圓部分交疊,那樣會產生什麼效果就真是不得而知了。
4 個徑向漸變效果的最後一個色標都是透明色。若是想要兩色標直接的過渡柔和一些,只要兩個顏色值一致就能夠了。代碼裏面看不出來,是由於我用了兩種不一樣的顏色表示方法,但實際上是相同的,#019F62 = rgba(1,159,98,1)。
上面的一個例子裏面,我用了循環來實現圖案的效果。其實,有一個更加簡單的方法:createPattern。
createPattern(image, type)
該方法接受兩個參數。Image 能夠是一個 Image
對象的引用,或者另外一個 canvas 對象。Type
必須是下面的字符串值之一:repeat
,repeat-x
,repeat-y
和 no-repeat
。
注意: 用 canvas 對象做爲 Image
參數在 Firefox 1.5 (Gecko 1.8) 中是無效的。
圖案的應用跟漸變很相似的,建立出一個 pattern 以後,賦給 fillStyle
或 strokeStyle
屬性便可。
var img = new Image(); img.src = 'someimage.png'; var ptrn = ctx.createPattern(img,'repeat');
注意:與 drawImage 有點不一樣,你須要確認 image 對象已經裝載完畢,不然圖案可能效果不對的。
在最後的例子中,我建立一個圖案而後賦給了 fillStyle
屬性。惟一要注意的是,使用 Image 對象的 onload
handler 來確保設置圖案以前圖像已經裝載完畢。
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <script type="text/javascript"> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); //建立新Image對象,用作圖案 var img = new Image(); img.src = 'https://pic.cnblogs.com/avatar/1489272/20190625145401.png'; img.onload = function() { //建立圖案 var pattern = ctx.createPattern(img, "repeat"); ctx.fillStyle = pattern; ctx.fillRect(0, 0, 150, 150); } } </script> </head> <body onload="draw();"> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <canvas id="myCanvas" width="150" height="150"> </canvas> <script src="" async defer></script> </body> </html>
效果如圖所示:
shadowOffsetX = float
shadowOffsetX
和 shadowOffsetY
用來設定陰影在 X 和 Y 軸的延伸距離,它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸,正值則表示會往下或右延伸,它們默認都爲 0
。
shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY
用來設定陰影在 X 和 Y 軸的延伸距離,它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸,正值則表示會往下或右延伸,它們默認都爲 0
。
shadowBlur = float
shadowBlur 用於設定陰影的模糊程度,其數值並不跟像素數量掛鉤,也不受變換矩陣的影響,默認爲 0
。
shadowColor = color
shadowColor 是標準的 CSS 顏色值,用於設定陰影顏色效果,默認是全透明的黑色。
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <script type="text/javascript"> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.shadowOffsetX = 2; ctx.shadowOffestY = 2; ctx.shadowBlur = 2; ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; ctx.font = '20px Times New Roman'; ctx.fillStyle = 'red'; ctx.fillText("Hello, World!", 5, 30); } </script> </head> <body onload="draw();"> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <canvas id="myCanvas" width="150" height="150"></canvas> <script src="" async defer></script> </body> </html>
效果如圖所示:
當咱們用到 fill
(或者 clip
和isPointinPath
)你能夠選擇一個填充規則,該填充規則根據某處在路徑的外面或者裏面來決定該處是否被填充,這對於本身與本身路徑相交或者路徑被嵌套的時候是有用的。
兩個可能的值:
**"nonzero**
": non-zero winding rule, 默認值.**"evenodd"**
: even-odd winding rule.這個例子,咱們用填充規則 evenodd
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <script type="text/javascript"> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(50, 50, 30, 0, Math.PI * 2, true); ctx.arc(50, 50, 15, 0, Math.PI * 2, true); ctx.fill("evenodd"); } </script> </head> <body onload="draw();"> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <canvas id="myCanvas" width="150" height="150"></canvas> <script src="" async defer></script> </body> </html>
效果如圖所示: