在HTML5/WinJS中製作導彈動畫

我正在使用Windows 8上的HTML5/WinJS編寫遊戲。我試圖產生子彈或導彈擊中某物的效果;然而，我似乎無法讓對象在沒有邊框的情況下穿過背景中的其他圖像。我的工作理論是我看到的邊框是使用clearRect造成的。這裏是我的代碼：在HTML5/WinJS中製作導彈動畫

var moveBullet = function(missile) { 

    if (missile.Image == undefined || missile.Image == null) { 
     var image = new Image(); 
     image.src = "/images/missileImg.png"; 
     image.onload = function() { 
      canvasContext.clearRect(missile.PointX - (image.width/2), missile.PointY, image.width, image.height); 
      missile.PointY += BULLET_SPEED; 
      canvasContext.drawImage(image, missile.PointX - (image.width/2), missile.PointY); 
     }; 
    } else { 
     canvasContext.clearRect(missile.PointX - (missile.Image.width/2), missile.PointY, missile.Image.width, missile.Image.height); 
     missile.PointY += BULLET_SPEED; 
     canvasContext.drawImage(missile.Image, missile.PointX - (missile.Image.width/2), missile.PointY); 
    } 
}

有沒有辦法實現，而無需使用clearRect，或恢復的背景，因爲它移動過去的一個更有效的方式這種效果呢？

來源

2013-04-30 pm_2

「拖曳邊界」是什麼意思？ – Joseph 2013-04-30 07:26:18

當它通過另一個圖像時，您可以看到它周圍的一個小黑色邊框。 – 2013-04-30 08:05:02

你檢查過是否完全透明嗎？ – 2013-04-30 08:13:29

使您的clearRect區域比導彈圖像大幾個像素。通常在畫布上繪製一些內置的抗鋸齒。這意味着如果您用一種顏色繪製一條線，然後用背景顏色繪製相同的線，則不會移除原始線。這裏可能會發生類似的情況，在這種情況下，一些額外的像素應該有所幫助。

這就是說，有一個警告要注意這裏。

首先，我假設背景是與畫布分離的元素？它看起來像是因爲你不會在畫布本身上重繪那部分。

我問的原因是，在同一個畫布上重複調用clearRect將最終顯示性能問題。會發生什麼情況是，每次調用clearRect都會累積到畫布中的一個複雜區域 - 實質上是透明度蒙版。所以每次畫布都要渲染時，每當你改變它時，都必須處理該透明區域。漸漸地，當你在整個畫布上留下越來越多的小清晰影像時，這個區域會變得越來越複雜，性能也會下降。

我在IE試駕網站上做過這個暴雪試玩的實驗一次，我想知道爲什麼這個演示會清除整個畫面，每個動畫幀。所以我嘗試着清除每個雪花背後的痕跡（並且讓每個雪花更大一些，因爲我已經走過了）。看起來像正確的事情，但表現下降了幾個數量級。在IE團隊內部詢問，他們確認了我描述的區域行爲。

所以最好的做法實際上是在每個畫面上對整個畫布執行clearRect，然後重新繪製導彈和其他動畫。這可能看起來不直觀，但最終效果最好，並避免像素軌跡的所有這些毛刺。

來源

2013-04-30 16:09:34

當我讀到這個時，我認爲每次清理屏幕都會導致閃爍的效果，但它更光滑 - 感謝您的幫助！ – 2013-05-02 08:24:34

我也這麼認爲。但是畫到畫布並不意味着你直接畫到屏幕上。畫布上的所有內容都會被緩衝，直到下一次刷新到屏幕，此時整個元素的內容都會一次繪製完畢。換句話說，繪製到畫布與繪製到窗口不同，所以對閃爍的擔心是不一樣的。 – 2013-05-29 17:08:34

在HTML5/WinJS中製作導彈動畫

回答

相關問題