重复绘制一个没有边缘的画布变暗

Question

我有这段代码，由于某种原因它应该多次绘制canvas（使用setTimeout）：

function drawImage() {
    var img = new Image();
    var canvas = document.getElementById("event");
    var context = canvas.getContext("2d");
    img.src = "../img/event.png";
    img.onload = function () {
    context.drawImage(img, 0, 0);
   }
   setTimeout(drawImage, 3000);
}

但是它会导致黑暗边缘更多次：

是否可以防止边缘在重复绘制时变暗？

Answer 1

只要图像有一个alpha通道，你就无法避免这种情况，反复重新绘制它而没有一些机制来重置绘制的alpha值。

这样做的原因是该像素的alpha值会累积，因此当您将非不透明边缘（或消除锯齿边缘）绘制在彼此之上时，alpha通道的值将被添加到已绘制的值导致边缘越来越明显。

幸运的是有两种方法可以避免这种情况：

A）如果要在绘制图像之前使用clearRect保留图像中的Alpha通道。

context.clearRect(0, 0, img.width, img.height);
context.drawImage(img, 0, 0);

这将清除画布和Alpha通道。

的 ONLINE DEMO

B）如果Alpha通道不重要，请保存不带任何Alpha通道的图像（使用PNG关闭透明度或使用JPEG）。

在示例中还有一个循环注释 - 这是不重绘图像的好方法，因为每次启动加载/缓存检查以及图像解码。

您可以修改您的代码（随意采用）：

var canvas = document.getElementById("event");
var context = canvas.getContext("2d");

var img = document.createElement('img'); // due to chrome bug
img.onload = drawImage;                  // set onload first

img.src = "../img/event.png";            // src last..

function drawImage() {
    context.clearRect(0, 0, img.width, img.height);
    context.drawImage(img, 0, 0);
    setTimeout(drawImage, 3000);
}