HTML 5畫布動畫 - 對象閃爍

我正在學習操作HTML 5畫布的方法，並決定編寫一個簡單的遊戲，滾動街機，以便更好地理解。它仍處於開發的初始階段，並且呈現出一個背景（一顆正在移動的星球場），但我遇到了一個小問題，但令人討厭的問題 - 一些明星在移動時閃爍。下面是我使用的代碼：HTML 5畫布動畫 - 對象閃爍

var c = document.getElementById('canv'); 

var width = c.width; 
var height = c.height; 
var ctx = c.getContext('2d');//context 

var bgObjx = new Array; 
var bgObjy = new Array; 
var bgspeed = new Array; 

function init(){ 
    for (var i = 1; i < 50; i++){ 
     bgObjx.push(Math.floor(Math.random()*height)); 
     bgObjy.push(Math.floor(Math.random()*width)); 
     bgspeed.push(Math.floor(Math.random()*4)+1); 
    } 
    setInterval('draw_bg();',50); 
} 

function draw_bg(){ 
    var distance; //distace to star is displayed by color 

    ctx.fillStyle = "rgb(0,0,0)"; 
    ctx.fillRect(0,0,width,height); 

    for (var i = 0; i < bgObjx.length; i++){ 
     distance = Math.random() * 240; 
     if (distance < 100) distance = 100;//Don't let it be too dark 
     ctx.fillStyle = "rgb("+distance+","+distance+","+distance+")"; 
     ctx.fillRect(bgObjx[i], bgObjy[i],1,1); 
     bgObjx[i] -=bgspeed[i]; 
     if (bgObjx[i] < 0){//if star has passed the border of screen, redraw it as new 
      bgObjx[i] += width; 
      bgObjy[i] = Math.floor(Math.random() * height); 
      bgspeed[i] = Math.floor (Math.random() * 4) + 1; 
     } 
    } 
}

正如你所看到的，有3個數組，一個恆星（對象）X座標，一個用於Ÿ，和一個速度變量。星星的顏色改變每一幀，使其閃爍。我懷疑，顏色變化問題，並綁定對象的顏色，以速度：

for (var i = 0; i < bgObjx.length; i++){ 
    distance = bgspeed[i]*30;

其實，這解決了這個問題，但我仍然不明白如何。請任何圖形渲染大師麻煩解釋這一點？

預先感謝您。

P.S.以防萬一：是的，我從現有的Canvas遊戲中抽取了一些解決方案，包括顏色綁定到速度。我只想弄清楚它背後的原因。

來源

2010-10-29 Arnthor

你可以發佈這個地方讓我們看看它的行動嗎？ – mway 2010-10-29 15:11:19

http://recon-by-fire.eu/html5.php - 從上面的菜單中選擇'Scroller'（抱歉，沒有直接鏈接，我通過框架完成了這個） – Arnthor 2010-10-29 15:17:12

在這種情況下，恆星的「閃爍」是由確定恆星的顏色值（顏色）時出現邏輯錯誤引起的。

distance = Math.random() * 240; //這是不能保證返回一個整數

distance = (Math.random() * 240)>>0; //這向下舍入的結果到最接近的整數

雙緩衝是通常用於帆布不必要的，因爲瀏覽器將不顯示所繪製的畫布直到繪圖功能全部完成。

來源

2011-04-19 18:25:11

嗯，那麼我猜，如果距離不是整數，星號不繪製（我可以是CO次:)）。我感謝你，因爲我很久以前就放棄了這個案子。 – Arnthor 2011-04-19 22:32:38

用於在編寫direct2d遊戲時看到類似的效果。發現雙緩衝器可以修復閃爍。

不知道你將如何使用canvas標籤完成一個雙（或三重？）緩衝區，但這是我首先要考慮的。

來源

2010-10-29 15:09:58

請檢查一下，謝謝。 – Arnthor 2010-10-29 15:24:02

請參閱http://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering – Jesper 2010-12-16 12:38:34

HTML 5畫布動畫 - 對象閃爍

回答

相關問題