HTML5 Canvas實現設定透明度使用範例

通常我們使用rgb()函數設定不透明的顏色，要實現半透明的顏色有兩種方法。

1，使用rgba()函數

這種方法好適合使用多種顏色繪製，而且每個顏色需要單獨設定不同的透明度的情況。
比如下面範例，底部的圓形使用實心顏色，上面的三角形使用半透明顏色填充，兩種圖形邊框都使用實心顏色。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
//設定填充及描邊顏色
context.fillStyle = "rgb(100,150,185)";
context.lineWidth = 10;
context.strokeStyle = "red";
//繪製圓形
context.arc(110, 90, 80, 0, 2*Math.PI);
context.fill();
context.stroke();
 
//調用beginPath()繪製新形狀
context.beginPath();
 
//用半透明的顏色填充三角形
context.fillStyle = "rgba(100,150,185,0.5)";
//繪製三角形
context.moveTo(215,50);
context.lineTo(25,190);
context.lineTo(315,190);
context.closePath();
context.fill();
context.stroke();

2，設定繪圖內容相關的globalAlpha屬性

設定後，後續所有的繪圖操作都會使用相同的透明度。
下面範例可以看到三角形的內部和邊框都透明了。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
//設定填充及描邊顏色
context.fillStyle = "rgb(100,150,185)";
context.lineWidth = 10;
context.strokeStyle = "red";
//繪製圓形
context.arc(110, 90, 80, 0, 2*Math.PI);
context.fill();
context.stroke();
 
//調用beginPath()繪製新形狀
context.beginPath();
 
//用半透明的三角形
context.globalAlpha = 0.5;
context.fillStyle = "rgba(100,150,185)";
//繪製三角形
context.moveTo(215,50);
context.lineTo(25,190);
context.lineTo(315,190);
context.closePath();
context.fill();
context.stroke();