相关疑难解决方法(0)

使用HTML5 <canvas>元素,我想加载一个图像文件(PNG,JPEG等),完全透明地将它绘制到画布上,然后将其淡入.我已经想出如何加载图像并将其绘制到帆布,但我不知道如何绘制它的不透明度.

这是我到目前为止的代码:

var canvas = document.getElementById('myCanvas');

if (canvas.getContext)
{
    var c           = canvas.getContext('2d');
    c.globalAlpha   = 0;

    var img     = new Image();
    img.onload  = function() {
        c.drawImage(img, 0, 0);
    }
    img.src     = 'image.jpg';
}

有人请指出我正确的方向,如设置的属性或调用的功能,将改变不透明度？

我一直在设置一个小框架,用于将可定位和动画图形渲染到<canvas>元素上 - 主要是为了帮助我理解它.

我从互联网上下载了一个随机精灵表进行测试 - 它有一个透明的背景,似乎在Chrome,我的iPhone和Safari上渲染得很好.

这是演示:http://martywallace.com/simplecanvas/

在Firefox中,精灵的透明部分加载为白色,最终看起来像这样:

是否有特定于Firefox的方式来启用透明度,还是不支持？

我正在使用rgb像素数据绘制图像.我需要为该图像设置透明背景颜色.我可以将alpha设置为透明图像的值是多少？或者还有其他解决方案吗？