Fatal编程技术网
  • html/
  • Html 如何在绘制画布元素后更改其不透明度（alpha，透明度）？

Html 如何在绘制画布元素后更改其不透明度（alpha，透明度）？

html canvas

Html 如何在绘制画布元素后更改其不透明度（alpha，透明度）？,html,canvas,transparency,opacity,alpha,Html,Canvas,Transparency,Opacity,Alpha,使用HTML5元素，我想加载一个图像文件（PNG、JPEG等），将其完全透明地绘制到画布上，然后淡入淡入。我已经知道了如何加载图像并将其绘制到画布上，但我不知道在绘制后如何更改其不透明度 以下是我目前掌握的代码： var canvas = document.getElementById('myCanvas'); if (canvas.getContext) { var c = canvas.getContext('2d'); c.globalAlpha

使用HTML5
元素，我想加载一个图像文件（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';
}
有人能给我指出正确的方向吗？比如设置一个属性或调用一个函数来改变不透明度？

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

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

我也在寻找这个问题的答案（为了澄清，我希望能够使用用户定义的不透明度绘制图像，例如如何使用不透明度绘制形状）如果使用基本体形状绘制，则可以使用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值。

编辑：标记为“正确”的答案是不正确的

这很容易做到。尝试以下代码，将“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>


var帆布；
var语境；
var-ga=0.0；
var-timerId=0；
函数init（）
{
canvas=document.getElementById（“myCanvas”）；
context=canvas.getContext（“2d”）；
timerId=setInterval（“fadeIn（）”，100）；
}
函数fadeIn（）
{
clearRect（0,0，canvas.width，canvas.height）；
context.globalAlpha=ga；
var ie=新图像（）；
ie.onload=函数（）
{
drawImage（即，0，0，100，100）；
};
ie.src=“ie.jpg”；
ga=ga+0.1；
如果（ga>1.0）
{
goingUp=假；
清除间隔（timerId）；
}
}
关键是globalAlpha属性

在Win7上使用IE 9、FF 5、Safari 5和Chrome 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
    之间包装对
    globalAlpha
    等内容的更改（事实上，要大量使用），以确保不会从其他地方破坏设置，特别是当要从事件调用绘图代码位时
    • 

此建议基于画布2d环境中的像素操作

来自MDN：

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

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


getImageData
用法：


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



putImageData
语法：


context.putImageData(myImageData, x, y); 


其中，
context
是画布2d上下文，
x
和
y
是画布上的位置


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


因此，要获得红、绿、蓝和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';



var canvas=document.getElementById（'myCanvas'）；
var c=canvas.getContext（'2d'）；
var img=新图像（）；
img.onload=函数（）{
c、 绘图图像（img，0，0）；
var ImageData=c.getImageData（0,0，img.宽度，img.高度）；
对于（var i=0；i

您可以创建自己的“着色器”-请参阅完整的MDN文章
，您可以。透明画布可以通过使用destination out全局合成操作快速褪色。它不是100%完美，有时会留下一些痕迹，但可以根据需要进行调整（即，使用“source over”并用白色填充，alpha为0.13，然后淡入以准备画布）


如果您使用库，您可以在绘图时使用属性。如果您需要淡入淡出效果，只需使用不同的值重新绘制即可。
我认为这最好地回答了这个问题，它实际上更改了已绘制内容的alpha值。当问到这个问题时，这可能不是api的一部分

给定2d上下文
c


函数约简alpha（x，y，w，h，dA）{
设screenData=c.getImageData（x，y，w，h）；
对于（设i=3；i
globalAlpha工作得很好。它是标准的一部分：准确地说，不是
canvas
元素具有