html5 canvas img идет за другими нарисованными 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); 
} 

Примечание: Вам нужно очистить весь холст в самом начале (если вы делаете так). Там также есть вероятность, что вы делаете какой-то холст перевод или scaling материал, который, если сделано в неправильном порядке, все может быть довольно запутанным.