canvas createRadialGradient()

admin發表於2018-11-30
Canvas

createRadialGradient方法可以建立一個徑向漸變。

與徑向漸變對應的是線性漸變，顏色沿著一條軸線方向有規則過渡。

而徑向漸變則是顏色從中心向外輻射型有規則過渡。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

引數解析：

（1）.(x0,y0)：規定漸變起點圓的圓心座標。

（2）.r0：規定漸變起點圓的半徑尺寸。

（3）.(x1,y1)：規定漸變終點圓的圓心座標。

（4）.r1：規定漸變終點圓的半徑尺寸。

createRadialGradient方法的返回值是一個漸變物件。

下面對概念進一步分析，圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/215107dropisiwwsbi6ibi.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

黃色是漸變起點圓，紫色是漸變終點圓，不要想當然認為漸變是從起點圓的圓心開始的。

漸變區域事實是從起點圓外層開始，也就是上圖黃色雙向箭頭指示的區域。

到這裡，可能還是對此方法的使用不夠清晰，不用擔心，後面有詳細的程式碼例項演示。

瀏覽器相容：

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.火狐瀏覽器支援此方法。

（5）.Opera瀏覽器支援此方法。

（6）.Safari瀏覽器支援此方法。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
  margin: 50px;
}
</style>
<script>
window.onload = function () {
  let cs = document.getElementById("cs");
  let ctx = cs.getContext('2d');
  let gnt = ctx.createRadialGradient(200, 300, 20, 200, 300, 100);
  gnt.addColorStop(0, 'green');
  gnt.addColorStop(0.5, 'red');
  gnt.addColorStop(1, 'blue');
  ctx.fillStyle = gnt;
  ctx.arc(200, 300, 130, 0, 2 * Math.PI);
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="cs" width="800" height="600"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/215141p96izvdtms7477bu.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.createRadialGradient方法建立一個漸變物件。

（2）.通過addColorStop方法新增兩個漸變顏色並劃分漸變區域，將整段漸變區域看做1，那麼0-0.5區域由綠色漸變到紅色，0.5-1區域由紅色漸變到藍色。漸變起點之前的區域由純綠色填充，漸變終點之後區域由藍色填充。

（3）.漸變物件不能單獨存在，需要填充到其他圖案，或者作為描邊。

上述程式碼中，漸變起點圓與終點圓圓心重合，所以漸變看起來非常的規則，當然也可以不重合。

關於addColorStop方法更多內容參閱canvas addColorStop()一文。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let cs = document.getElementById("cs");
  let ctx = cs.getContext('2d');
  let gnt = ctx.createRadialGradient(200, 300, 50, 200, 200, 160);
  gnt.addColorStop(0, 'green');
  gnt.addColorStop(0.3, 'blue');
  gnt.addColorStop(1, 'red');
  ctx.fillStyle = gnt;
  ctx.arc(200, 300, 160, 0, 2 * Math.PI);
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="cs" width="800" height="600"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/215233zznxs5ln8aaw4lii.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼中，起點圓與終點圓圓心並不重合，所以漸變開起來沒有那麼規整。

最後特別說明一下，起點圓半徑如果大於終點圓，那麼就是由外向內進行漸變，很容易理解。

本文就不再演示，感興趣的朋友可以自行測試一下。

相關文章