如果多次应用，带alpha的rgba fillStyle不会完全不透明 [英] rgba fillStyle with alpha does not get fully opaque if applied multiple times

问题描述

我发现了一个奇怪的问题。以下代码导致图像逐渐消失，因为它一次又一次地被半透明矩形透支。

但至少在<$ c的第10次迭代中$ c> draw（）; 图像应该完全透支，因为那时rect应该是完全不透明的，对吧？但它实际上永远不会完全消失。

这种影响在Chrome上比在Firefox上更糟。但要注意：糟糕的屏幕可能会隐藏这种错误的行为=）

我还做了一个 demo 。

  $（function（）{
 var canvas = $（＃mycanvas），
 ctx = canvas [0] .getContext（2d），
 imgUrl =http://it-runde.de/dateien/2009/august/14 /25.png; 
 
 
 var image = new Image（）; 
 image.src = imgUrl; 
 $（image）.load（function（） {
 ctx.drawImage（image，0,0，canvas.width（），canvas.height（））; 
 draw（）; 
}）; 
 
 function draw（）{
 ctx.fillStyle =rgba（255,255,255,0.1）; 
 ctx.fillRect（0,0，canvas.width（），canvas.height（） ）; 
 setTimeout（draw，100）; 
 
} 
}）; 
  

一个人可能希望实现的效果就是说，一个物体正在整个画布上移动，并且已经绘制的位置只是略微透支，所以后褪色效果的余辉。但是这个结果真是太棒了。

那么有什么解决办法吗？

解决方案

由于矩形只有10％不透明，因此在图像上绘制它的结果是图像的90％和10％的白色的复合。每次绘制它都会丢失前一次图像迭代的10％;矩形本身不会变得更不透明。 （要获得该效果，您需要在图像上放置另一个对象并为其不透明度设置动画。）因此，在10次迭代后，您仍然有（0.9 ^ 10）或大约35原始图像的百分比。请注意，舍入错误可能会在大约30次迭代后设置。

I stubled upon a weird problem. Tthe following code results in making the image fade away because it's overdrawn by a semi-opaque rect over and over again.

But at least at the 10th iteration of draw(); the image should be completely overdrawn, because the rect should be fully opaque by then, right? But it actually never disappears completely.

This effect is worse on Chrome than it is on Firefox. But beware: bad screens may hide this faulty behaviour =)

I also made a demo on jsFiddle.

$(function () {
var canvas = $("#mycanvas"),
    ctx = canvas[0].getContext("2d"),
    imgUrl = "http://it-runde.de/dateien/2009/august/14/25.png";


var image = new Image();  
image.src = imgUrl ;  
$(image).load(function() {
    ctx.drawImage(image, 0, 0, canvas.width(), canvas.height());
    draw();
});

function draw() {        
    ctx.fillStyle = "rgba(255, 255, 255, 0.1)";
    ctx.fillRect(0,0,canvas.width(),canvas.height());
    setTimeout(draw, 100);

}    
});

The effect one may want to achieve is that, say an object is moving all over the canvas, and the already drawn positions get overdrawn only slightly so after-glow of after-fade effect. But this result is just fugly.

So is there any solution to this?

解决方案

Since the rectangle is only 10% opaque, the result of drawing it over the image is a composite of 90% of the image and 10% white. Each time you draw it you lose 10% of the previous iteration of the image; the rectangle itself does not become more opaque. (To get that effect, you would need to position another object over the image and animate its opacity.) So after 10 iterations you still have (0.9^10) or about 35% of the original image. Note that rounding errors will probably set in after about 30 iterations.

这篇关于如果多次应用，带alpha的rgba fillStyle不会完全不透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！