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

【问题标题】：Drawing repetitively one canvas without that edges become dark重复绘制一个没有边缘的画布变暗
【发布时间】：2013-07-19 22:48:28
【问题描述】：

我有这段代码，由于某种原因，它应该多次绘制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);
}

但它会导致暗边绘制更多次：

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

【问题讨论】：

标签： html image canvas drawing

【解决方案1】：

只要图像有一个 alpha 通道，在没有某种机制来重置绘制的 alpha 值的情况下一遍又一遍地重新绘制它时，您就无法避免这种情况。

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

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

A)如果您想在图像中保留 alpha 通道，请在绘制图像之前使用clearRect。

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);
}

【讨论】：