проблема с ясным html5

Question

у меня есть этот код

function clear(){
    context2D.clearRect(0, 0, canvas.width, canvas.height);
}


function desenhaBonecoDir(){

    clear();
    context2D.setTransform(1, 0.30, 1, -0.30, 10, 380);//problem here
    context2D.drawImage(bonecoRight, x, y);
    x += -10 * xDirection;
}

, если я удаляю строку, где я комментирую «проблема здесь», сценарий работает хорошо, но если я меняю перспективу спреобразование набора, я не знаю почему, изображение копируется, но не восстанавливается, в результате повторяется изображение, когда я нажимаю клавиши

Любая помощь?

спасибо

Answer 1

Проблема вызвана изменением перспективы, но не изменением ее обратно, когда вы ее очищаете, поэтому она очищает «перспективу», а не весь холст, попробуйте ниже. Это сохраняет текущую перспективу, затем вы изменяете ее на все, что вам нужно, рисуете и т. Д., А затем восстанавливаете восстанавливает предыдущую перспективу, чтобы вернуть свои обычные координаты.

context2D.save();
context2D.setTransform(1, 0.30, 1, -0.30, 10, 380);
context2D.drawImage(bonecoRight, x, y);
context2D.restore();

Немного изменил ваш код, чтобы показать, как он работает. http://jsfiddle.net/89yjG/1/

Комментируйте, сохраняйте и восстанавливайте, и вы заметите артефакты.