0

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

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

暗边

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

4

1 回答 1

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);
}
于 2013-07-19T22:58:47.187 回答