幸运快三极速快3|极速快3猜大小

canvas createRadialGradient() 徑向漸變

2018-8-9 08:59| 作者: admin| 查看: 4322| 評論: 0|來自: 螞蟻部落

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

推薦參閱教程板塊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.iufrl.icu/" />
<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).漸變的起點之前和漸變的終點之后填充對應的起點純色和終點純色。

特別說明:如果起點圓的半徑大于終點圓的半徑,那么就反過來變成從外到內的漸變。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
幸运快三极速快3 体彩大乐透选号方法 加拿大pc一整天走势图 福彩30选七走势图 高清重庆时时图标 天津时时彩开奖今天 30选5中几个才算三等奖 河北时时开奖号码走势图表 分分彩胆码技巧 幸运赛马开奖网 腾龙时时彩手机安卓APP