html5 canvas img go behind other drawn obejcts

Question

嗨，我正在創建一個html5帆布遊戲，主要思想是每個動畫都有一個循環，在每個框架中重繪畫布上的所有內容。 出於某種原因，繪製的對象不以我想要的順序出現。我首先需要背景圖像，然後是矩形，最後是另一個圖像，然後矩形會阻止第二個圖像的視圖。

我的相關代碼：

function playerdraw(p){ 
ctx.rect(p.x,p.y,100,150); 
ctx.stroke(); 
//irrelevant stuff here... 
ctx.drawImage(p.im,p.x,p.y+25,100,100); 
} 

我上的window.onload運行整個事情，所以圖像加載shoudn't是一個問題。 這是怎麼回事？

Answer 1

我現在知道我的問題是什麼。我忘了添加

ctx.beginPath(); 

在我的代碼中。我一次又一次地調用函數，然後繪製更多的矩形，然後我想要。我感到很傻。

Answer 2

（你有沒有提供了足夠的代碼，我認爲這可能是問題。）

你需要在每次運行playerdraw()功能（時間重繪背景圖片，如果你清除整個畫布每次）。所以，下面的代碼應該工作：

function playerdraw(p) { 
    // clear entire canvas 
    ctx.clearRect(...); 
    // draw background image 
    ctx.drawImage(...); 
    // draw rectangle 
    ctx.rect(p.x, p.y, 100, 150); 
    ctx.stroke(); 
    // irrelevant stuff here... 
    // draw other image 
    ctx.drawImage(p.im, p.x, p.y + 25, 100, 100); 
} 

注：你必須在一開始（如果你這樣做）清除整個畫布。還有一種可能性，你正在做某種畫布翻譯或縮放東西，如果做錯了順序，事情可以變得相當混亂。