216

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

有人会请我指出正确的方向，例如要设置的属性或要调用的函数会改变不透明度吗？

4

9 回答 9

330

我也在寻找这个问题的答案，（澄清一下，我希望能够绘制具有用户定义的不透明度的图像，例如如何绘制具有不透明度的形状）如果您使用原始形状绘制，您可以设置填充和描边带有 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时间。

于 2010-04-20T13:25:27.103 回答
122

一些更简单的使用示例代码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在所有平台上都调用您的处理程序，即使图像已经在缓存中。

  • 将更改包装globalAlpha在 asave和之间restore（实际上经常使用它们），以确保您不会破坏其他地方的设置，特别是当将从事件中调用一些绘图代码时。

于 2011-11-03T20:15:10.367 回答
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 进行了测试。

于 2011-06-22T18:17:39.093 回答
13

此建议基于画布 2d 上下文中的像素操作。

来自 MDN：

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

为了操作像素，我们将在这里使用两个函数 -getImageData和putImageData.

getImageData用法：

var myImageData = context.getImageData(left, top, width, height);

putImageData语法：

context.putImageData(myImageData, x, y);

context您的画布 2d 上下文在哪里，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是水平偏移量，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 文章

于 2012-02-21T18:35:07.760 回答
8

你可以。使用destination-out全局复合操作可以快速淡化透明画布。它不是 100% 完美的，有时它会留下一些痕迹，但可以根据需要对其进行调整（即使用“source-over”并用 alpha 为 0.13 的白色填充它，然后淡化以准备画布）。

// 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';
于 2012-10-08T10:17:58.057 回答
7

我认为这最好地回答了这个问题，它实际上改变了已经绘制的东西的 alpha 值。当被问到这个问题时，也许这不是 api 的一部分。

给定二维上下文c。

function reduceAlpha(x, y, w, h, dA) {
    let screenData = c.getImageData(x, y, w, h);
    for(let i = 3; i < screenData.data.length; i+=4){
        screenData.data[i] -= dA; //delta-Alpha
    }
    c.putImageData(screenData, x, y );
}
于 2019-04-14T19:54:25.967 回答
4

设置全局 Alpha 绘制具有不透明度的对象，然后设置回正常。

  //////////////////////// circle ///////////////////////
  ctx.globalAlpha = 0.75;
  ctx.beginPath();
  ctx.arc(x1, y1, r1, 0, Math.PI*2);
  ctx.fillStyle = colour;
  ctx.fill();
  ctx.closePath();
  ctx.globalAlpha = 1;

于 2021-06-29T12:57:42.170 回答
-1

如果您使用jCanvas库，您可以在绘图时使用opacity属性。如果您需要淡入淡出效果，只需使用不同的值重绘即可。

于 2014-11-09T00:06:44.693 回答
-12

你不能。这是即时模式图形。但是您可以通过在其上以不透明度的背景颜色在其上绘制一个矩形来模拟它。

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

于 2010-03-16T18:47:15.060 回答