在畫布

Question

更改URL圖像的透明度我有幾行代碼是添加植物到我的畫布遊戲：

function drawPlant() { 
    base_image = new Image(); 
    base_image.src = 'http://i.imgur.com/xOupnQp.png'; 
    if (treeLoaded) { 
     ctx.drawImage(base_image, 20, 333, 60, base_image.height * (60/base_image.width)); 
    } 
    else { 
    base_image.onload = function(){ 
     treeLoaded = true; 
    }; 
} 

這使圖像進入我的遊戲。不過，我也想讓它淡出一點。我可以使用GlobalAlpha嗎？如果是這樣，我該怎麼做？謝謝。

Answer 1

是的，globalAlpha是一個不錯的選擇。它取值範圍[0，1]。

例如：

（例如還糾正裝載模式）

function drawPlant() { 
    base_image = new Image(); 
    base_image.onload = function(){ 
     treeLoaded = true; 
     ctx.globalAlpha = 0.5; // 50% opacity 
     ctx.drawImage(this, 20, 333, 60, base_image.height * (60/base_image.width)); 
     ctx.globalAlpha = 1; // normal full opacity 
    }; 
    base_image.src = 'http://i.imgur.com/xOupnQp.png'; 
} 

你可能想太多考慮回調加載圖像發生異步地，例如，修改示例callback-能力可能看起來像：

function drawPlant(callback) { 
    base_image = new Image(); 
    base_image.onload = function(){ 
     treeLoaded = true; 
     ctx.globalAlpha = 0.5; // 50% opacity 
     ctx.drawImage(this, 20, 333, 60, base_image.height * (60/base_image.width)); 
     ctx.globalAlpha = 1; // normal full opacity 
     callback(this);  // invoke callback with image as argument 
    }; 
    base_image.src = 'http://i.imgur.com/xOupnQp.png'; 
} 

然後：

drawPlant(function(img) { 
    // continue from here... 
});