代码之家 › 专栏 › 技术社区 › Joe Lencioni

如何更改画布元素在绘制后的不透明度(alpha,transparency)?

alpha opacity transparency canvas html5

178

Joe Lencioni · 技术社区 · 16 年前

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

有人能给我指一个正确的方向,比如设置一个属性或者调用一个函数来改变不透明度吗?

7 回复 | 直到 8 年前

278

Bhuwan 8 年前

我也在寻找这个问题的答案(为了澄清,我希望能够绘制一个用户定义的不透明性的图像,例如如何用不透明性绘制形状)如果你用基本形状绘制,你可以用alpha设置填充和笔划颜色来定义透明度。就我现在的结论而言,这似乎并不影响图像绘制。

//works with shapes but not with images
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";

我的结论是 globalCompositeOperation 处理图像。

//works with images
ctx.globalCompositeOperation = "lighter";

我想知道是否有第三种方法来设置颜色,这样我们就可以给图像上色,使它们更容易透明。

编辑:

在进一步研究之后,我得出结论,您可以通过设置 globalAlpha 绘制图像之前的参数:

//works with images
ctx.globalAlpha = 0.5

如果你想在一段时间内达到一种衰落效果,你需要某种改变alpha值的循环,这是相当容易的,一种实现它的方法是 setTimeout 函数,查找它以创建一个循环,并根据该循环随时间改变alpha。

106

Ian 12 年前

一些简单的示例代码 globalAlpha :

ctx.save();
ctx.globalAlpha = 0.4;
ctx.drawImage(img, x, y);
ctx.restore();

如果你需要 img 要加载:

var img = new Image();
img.onload = function() {
    ctx.save();
    ctx.globalAlpha = 0.4;
    ctx.drawImage(img, x, y);
    ctx.restore()
};
img.src = "http://...";

笔记:

设置 'src' 最后,保证 onload 在所有平台上都会调用处理程序,即使映像已在缓存中。
将更改包装为 全球α 在一个之间 save 和 restore (实际上大量使用它们),以确保您不会从其他地方删除设置,特别是当从事件调用绘图代码位时。

james.garriss Pavel 15 年前

编辑: ~~标记为“正确”的答案不正确。~~

很容易做到。试试下面的代码,将“ie.jpg”替换成任何你手头上的图片:

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            var canvas;
            var context;
            var ga = 0.0;
            var timerId = 0;

            function init()
            {
                canvas = document.getElementById("myCanvas");
                context = canvas.getContext("2d");
                timerId = setInterval("fadeIn()", 100);
            }

            function fadeIn()
            {
                context.clearRect(0,0, canvas.width,canvas.height);
                context.globalAlpha = ga;
                var ie = new Image();
                ie.onload = function()
                {
                    context.drawImage(ie, 0, 0, 100, 100);
                };
                ie.src = "ie.jpg";

                ga = ga + 0.1;
                if (ga > 1.0)
                {
                    goingUp = false;
                    clearInterval(timerId);
                }
            }
        </script>
    </head>
    <body onload="init()">
        <canvas height="200" width="300" id="myCanvas"></canvas>
    </body>
</html>

关键是globalalpha属性。

在Win7上用IE 9、FF 5、Safari 5和Chrome 12进行测试。

vaxquis user2577497 10 年前

到目前为止,这个职位已经过时了,我同意我的建议。建议基于画布二维上下文中的像素操作。来自MDN:

您可以在字节级直接操作画布中的像素数据。

要操作像素,我们将在这里使用两个函数-getimagedata和putimagedata

和putImageData语法:

context.putImageData(myImageData,dx,dy);//dx,dy-x和y在画布上的偏移量

在哪里? 语境

为了得到红绿蓝和alpha值,我们将执行以下操作:

var r = imageData.data[((x*(imageData.width*4)) + (y*4))];
var g = imageData.data[((x*(imageData.width*4)) + (y*4)) + 1];
var b = imageData.data[((x*(imageData.width*4)) + (y*4)) + 2];
var a = imageData.data[((x*(imageData.width*4)) + (y*4)) + 3];

在哪里? X 是X偏移量, Y

所以我们有代码使图像半透明

var canvas = document.getElementById('myCanvas');
var c = canvas.getContext('2d');
var img = new Image();
img.onload  = function() {
   c.drawImage(img, 0, 0);
   var ImageData = c.getImageData(0,0,img.width,img.height);
   for(var i=0;i<img.height;i++)
      for(var j=0;j<img.width;j++)
         ImageData.data[((i*(img.width*4)) + (j*4) + 3)] = 127;//opacity = 0.5 [0-255]
   c.putImageData(ImageData,0,0);//put image data back
}
img.src = 'image.jpg';

你可以让你自己的“着色器”-见完整的mdn文章 here

Og2t 13 年前

你可以。透明画布可以通过使用 目的地输出 全球综合业务。它不是100%完美的,有时会留下一些痕迹,但可以根据需要进行调整(即使用“source over”并用0.13的alpha填充白色,然后淡入以准备画布)。

// Fill canvas using 'destination-out' and alpha at 0.05
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
ctx.beginPath();
ctx.fillRect(0, 0, width, height);
ctx.fill();
// Set the default mode.
ctx.globalCompositeOperation = 'source-over';

-2

cen 11 年前

如果你使用 jCanvas 可以使用的库 opacity 绘制时的属性。如果需要淡入效果,只需使用不同的值重新绘制。

-11

MPG 16 年前

你不能。这是即时模式图形。但是你可以用不透明的背景色在上面画一个矩形来模拟它。

如果图像的颜色不是恒定的,那么它会变得相当复杂。在这种情况下,您应该能够使用像素操作方法。只需在绘制图像之前保存该区域,然后将其与不透明度混合在一起。