canvas globalAlpha 屬性

admin發表於2019-08-26
Canvas

此屬性可以設定全域性透明度，掌握此屬性首先從其名稱入手。

利用此屬性可以實現批量設定圖形透明度的效果，在某些場景下會提高效率。

globalAlpha可以認為由兩個單詞合成：

（1）.global：翻譯成漢語具有"全域性"的意思。

（2）.alpha：表示一個通道，很多軟體都有此概念，值在0-1之間，外在變現就是透明度的變化。

通過上述分解可以有助於屬性的理解和記憶，屬性值介於0.0與1.0之間，0.0表示全透明，1.0表示不透明。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.globalAlpha=number;

引數解析：

（1）.number：規定透明值，介於 0.0（完全透明） 與 1.0（不透明） 之間。

瀏覽器相容：

（1）.IE9+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（4）.谷歌瀏覽器支援此屬性。

（5）.火狐瀏覽器支援此屬性。

（6）.Opera瀏覽器支援此屬性。

（7）.Safari瀏覽器支援此屬性。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload = () => {
  let cvs=document.getElementById("myCanvas");
  let ctx=cvs.getContext("2d");

  ctx.fillStyle="red";
  ctx.fillRect(20,20,75,50);
  
  ctx.globalAlpha=0.1;

  ctx.fillStyle="blue"; 
  ctx.fillRect(50,50,75,50); 
  ctx.fillStyle="green"; 
  ctx.fillRect(80,80,75,50);
}
</script>
</head>
<body>
<canvas id="myCanvas">當前瀏覽器不支援canvas標籤</canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201908/26/084852g6vnjdinfjrdvoa6.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼繪製了三個矩形，第一個不透明，第二個和第三個具有一定透明度。

程式碼分析如下：

（1）.globalAlpha設定全域性透明度，但是不要誤以為設定的透明度對所有的圖形都生效。

（2）.第一個紅色的矩形依然保持不透明的狀態，也就是透明度為1.0。

（3）.此屬性只會對後面的路徑或者子路徑生效。

相關文章