如何在JavaScript畫布中更改不透明度

Question

function Paint(){
var Size = document.getElementById('Size').value;
var Opacity = document.getElementById('opa').value;
var color = document.getElementById('color').value;
canvas = document.getElementById('PaintArea');
if(canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(musX-10, musY-10, Size, 0, Math.PI*2); 
    ctx.closePath();
    ctx.fill();
}
}

如您所見，我在HTML中通過用戶輸入獲得了fillStyle，但是如何在其中獲得不透明度？

Answer 1

試試這個：[ 更新 ]

ctx.globalAlpha = Opacity;

或者只是設置值：

ctx.globalAlpha = 0.2;

Answer 2

請使用帶有顏色的fillstyle：

ctx.fillStyle = "rgba(255, 255, 255, 0.5)";

對於圖片，請使用：

context.globalAlpha = 0.5;

這是完整的鏈接：

http://www.w3schools.com/tags/canvas_globalalpha.asp