繪圖重複一個帆布沒有這種邊緣變暗

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通道的值將被添加到已經繪製的值導致邊緣將變得越來越明顯。如果你想保持圖像使用clearRect的alpha通道繪製圖像之前

A）：

有幸運的一對夫婦的方式來避免這種情況。

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