canvas 設定透明度

admin發表於2018-10-14
Canvas

通過CSS設定元素透明度非常簡單，方式也很多。

比如最為典型的一個方式是利用RGBA顏色值來實現。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
background-color:rgba(125,255,158,0.5);

前三個引數設定背景顏色，最後一個引數0.5用來設定透明度。

最後一個引數值介於0-1之間，0表示完全透明，1表示完全不透明。

更多CSS設定透明度方式可以參閱CSS 設定透明度一章節。

canvas設定透明度可以採用RGBA顏色表示法，也可以採用其他顏色表示法，比如HSLA等。

下面僅以RGBA顏色表示法為例，首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  
  //設定矩形的透明度
  ctx.fillStyle = "rgba(100, 40, 40, 0.3)";
  ctx.fillRect(10, 10, 100, 50);

  //設定線條的透明度
  ctx.beginPath();
  ctx.strokeStyle = "rgba(100, 40, 40, 0.2)";
  ctx.moveTo(70, 80);
  ctx.lineTo(160, 70);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="450"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201810/14/234420snvjzb99ww340hdq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼繪製了一個矩形和斜線，並分別設定了它們的透明度。

通過fillStyle和strokeStyle分別填充矩形和描邊斜線，都是RGBA顏色值。

上述程式碼是分別設定填充和描邊透明度，繪製少數圖片還可以接受。

但是如果要繪製大量圖片，將是非常繁瑣的操作，所以需要尋求一種能夠統一設定透明度的方式。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  
  //無透明度紅色矩形
  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 100, 50);
  
  ctx.globalAlpha = "0.3";
  // 綠色矩形
  ctx.fillStyle = "green";
  ctx.fillRect(10, 70, 100, 50);
  // 藍色矩形
  ctx.fillStyle = "blue";
  ctx.fillRect(10, 130, 100, 50);
  
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="450"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201810/14/234445seaws8ybyyazuzeq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.globalAlpha可以設定全域性透明度，它的名字也體現了這一點。

（2）.此屬性只對它後面的路徑產生作用，又由於fillRect方法還具有建立新路徑和清除之前路徑和子路徑的功能，就如同隱式呼叫了beginPath方法，這就是為什麼第一個矩形沒有透明度的原因。

關於beginPath方法可以參閱canvas beginPath()一章節。

再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");

  ctx.globalAlpha = "0.2";
  //設定矩形的透明度
  ctx.fillStyle = "rgba(100, 40, 40, 0.9)";
  ctx.fillRect(10, 10, 100, 50);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="450"></canvas>
</body>
</html>

上述程式碼同時設定了顏色的透明度和全域性透明度。

這個時候會進行疊加處理，也就是最終透明度是0.2*0.9。

相關文章