在HTML Canvas中创建图像淡入

Question

I've been playing with HTML canvas and recently started changing the opacity of images with context.globalAlpha . I thought it would be fun to write a little script to automatically fade an image out. On the left side of the image, globalAlpha would be 1 (entirely opaque) and on the rightmost side globalAlpha would be 0 (entirely transparent).

I tried taking 1-pixel wide slices of the source image and setting the globalAlpha to a gradually decreasing number :

fadeCtx = fadeCanvas.getContext('2d');

for (var i = 0; i < sourceImage.width; i++) {
    fadeCtx.globalAlpha = (sourceImage.width - i) / sourceImage.width;
    console.log(fadeCtx.globalAlpha);
    fadeCtx.drawImage(sourceImage, i, 0, i + 1, sourceImage.height, i, 0, i + 1,    sourceImage.height);
}

( JSFiddle of my code )

But this appears to have no effect. The image is drawn in place, but it is fully opaque throughout.

Am I missing something about how to set opacity? As you can see in the fiddle, I've successfully set globalAlpha for an entire image. It's just when I try to draw "image slices" that it appears to have no effect.

Answer 1

Fixed it:

http://jsfiddle.net/mattdlockyer/zNcRB/

You were drawing the image over itself using i + 1 as the src image width and dst image width, instead use 1 for both.

The real offender was the dst image width, but I think using 1 for src image width may improve performance.

fadeCtx.drawImage(sourceImage, i, 0, 1, sourceImage.height, i, 0, 1, sourceImage.height);

Hope this helps!