canvas createRadialGradient() 徑向漸變

admin發表於2018-08-09
Canvas

徑向漸變就是從起點到終點顏色進行圓形漸變。

推薦參閱教程板塊canvas createLinearGradient()一文。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
createRadialGradient(x1,y1,r1,x2,y2,r2)

引數解析:

（1）.x1,y1:規定漸變起點圓心座標。

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

（3）.x2,y2:規定漸變終點圓心座標。

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

既然是顏色的漸變，那麼就需要新增顏色，使用addColorStop方法即可實現。

addColorStop()方法具有兩個引數，第一個引數規漸變顏色的起點位置，第二個引數規定漸變顏色。

先看一個圖示:

a:3:{s:3:\"pic\";s:43:\"portal/201808/09/090140uqp0zcvq9htb9pbs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可能不少朋友想當然的認為，漸變是從起點圓心開始，到終點圓外層結束。事實並非如此，漸變區域是紫色之間的區域。

程式碼例項如下:

[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 type="text/javascript">
window.onload = function () {
  var cvs = document.getElementById("canvas");
  var ctx = cvs.getContext('2d');
  var gnt = ctx.createRadialGradient(200, 300, 50, 200, 200, 200);
  gnt.addColorStop(0, 'green');
  gnt.addColorStop(0.3, 'blue');
  gnt.addColorStop(1, 'red');
  ctx.fillStyle = gnt;
  ctx.arc(200, 300, 200, 0, 2 * Math.PI);
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
</html>

上面的程式碼實現了徑向漸變的演示，下面對程式碼做一下分析。

程式碼分析:

（1）.新增了綠色、藍色和紅色為漸變顏色。

（2）.劃分漸變的區域是漸變開始圓的外緣到漸變結束圓外緣，也就是上面圖片紫色之間的區域。如果這段區域整體為1，那麼0.3就是百分之30處。0-0.3是由綠色漸變為藍色，0.3-1是由藍色漸變為紅色。

（3）.addColorStop()方法的呼叫物件並不是繪圖環境物件，而是createRadialGradient()方法的返回物件。

（4）.漸變的起點之前和漸變的終點之後填充對應的起點純色和終點純色。

特別說明：如果起點圓的半徑大於終點圓的半徑，那麼就反過來變成從外到內的漸變。

相關文章