canvas createLinearGradient()

admin發表於2018-12-01
Canvas

createLinearGradient方法可以建立一個線性漸變物件。

所謂線性漸變，就是顏色值沿著軸線的方向進行有規則的過渡。

軸線方向可以是水平、垂直或者傾斜。

語法結構：

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

引數解析：

（1）.x0：必需，規定漸變起點x軸座標。

（2）.y0：必需，規定漸變起點y軸座標。

（3）.x1：必需，規定漸變終點x軸座標。

（4）.y1：必需，規定漸變終點y軸座標。

createLinearGradient方法返回一個現象漸變物件。

既然是顏色漸變，必定要為其新增相關的漸變顏色，並且但是此物件並不能孤立存在。

它必須作為圖案填充或者描邊才能展現出它的效果，後面會有詳細的程式碼例項演示。

瀏覽器相容：

（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>
<script>
window.onload = function () {
  let cs = document.getElementById("cs");
  let ctx = cs.getContext("2d");
  let linear = ctx.createLinearGradient(100, 50, 300, 50);
  linear.addColorStop(0, "red");
  linear.addColorStop(1, "blue");
  ctx.fillStyle = linear;
  ctx.fillRect(100, 50, 200, 50);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="cs" width="400" height="250"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201812/01/121539fru882z9s2rd31r3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼實現了紅色到藍色的漸變效果，程式碼分析如下：

（1）.通過createLinearGradient(100, 50, 300, 50)方法建立一個漸變物件。

（2）.從方法的引數可以得出，是水平漸變，且漸變區域200畫素寬。

（3）.然後通過addColorStop方法對漸變區域分段且新增漸變顏色，上述程式碼規定，漸變由紅色到藍色從漸變區域的起始位置開始到終止位置結束。

（4）.線性漸變物件不能單獨存在，上述程式碼將其作為矩形的填充。

對漸變區域劃分的說明：

（1）.整個漸變區域可以看做1，然後利用百分比方式（需要轉換為小數形式）對此區域進行劃分，在此區域內指定一種顏色過渡到另一種顏色，區域的邊緣是純色。

（2）.前面的程式碼整個漸變僅劃分了一個區域，實現由紅色到藍色的漸變效果，0和1點是純色。

[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 linear = ctx.createLinearGradient(100, 50, 300, 50);
  linear.addColorStop(0, "red");
  linear.addColorStop(0.5, "blue");
  linear.addColorStop(1, "green");
  ctx.fillStyle = linear;
  ctx.fillRect(100, 50, 200, 50);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="cs" width="400" height="250"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201812/01/121602bq7y861dy75py1pt.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼實現了三個顏色的漸變效果，程式碼分析如下：

（1）.通過addColorStop將整個漸變區域劃分為兩塊，實現三種顏色的過渡。

（2）.0-0.5之間由紅色漸變到藍色，0.5-1之間由藍色漸變到綠色。

（3）.0、0.5和1點是純色，分別是紅、藍、綠。

[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 linear = ctx.createLinearGradient(100, 100, 200, 200);
  linear.addColorStop(0.2, "red");
  linear.addColorStop(0.5, "blue");
  linear.addColorStop(1, "green");
  ctx.fillStyle = linear;
  ctx.fillRect(100, 100, 100, 100);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="cs" width="400" height="250"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201812/01/121623l776v51czkbz177y.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼演示了具有一定傾斜度的漸變。

原理很簡單，就是設定起點座標與終點座標不在一個水平線上。

相關文章