javascript - 更改 Canvas 中 URL 图像的不透明度

Question

我有几行代码将植物添加到我的 Canvas 游戏中:

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';
}

您可能还想考虑回调，因为加载图像是异步发生的，例如，具有回调能力的修改示例可能如下所示:

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...
});