Canvas Html5: несколько холстов и очистка, как видно, также очищают другой холст.

Question

Я пытаюсь рисовать различные элементы холста и очищать их независимо. Однако мои 2 разных контекста, похоже, затрагивают оба элемента холста и не функционируют как отдельные слои. Я хочу, чтобы иметь возможность изменять различные элементы холста независимо друг от друга, чтобы создать фон и передний план.

Соответствующие HTML:

<canvas id="canvas" style="position: abosloute; top:0px; left: 0px; z-index: 0;" width="500" height="300"></canvas> 
<canvas id="canvas2" style="position: abosloute; top:0px; left: 0px;z-index: 1;" width="500" height="300"></canvas> 

Соответствующий JavaScript (для создания контекста объектов):

var canvas = document.getElementById("canvas"); 
var canvas2 = document.getElementById("canvas2"); 
var ctx = canvas.getContext("2d"); 
var ctx2 = canvas.getContext("2d"); 

Соответствующий JavaScript вызов:

ctx.clearRect(0, 0, canvas.width, canvas.height); 

Оказывается, чтобы очистить как ctx и ctx2 , Я не понимаю, почему.

Вот ссылка на полный код на jsfiddle:

http://jsfiddle.net/BvMdx/3/

Answer 1

Вы загружаете контекст из того же холста объекта:

var ctx = canvas.getContext("2d"); 
var ctx2 = canvas.getContext("2d"); 

Используйте это вместо:

var ctx = canvas.getContext("2d"); 
var ctx2 = canvas2.getContext("2d"); 

Теперь остается только удивляться, почему вы являетесь нами вместо двух холстов вместо одного? Похоже, вы пытаетесь наложить их, но если вы добавите границу, вы заметите, что она внизу, а другая сверху.

Что вы действительно хотите сделать, это сохранить свое состояние, прежде чем рисовать один из объектов, а затем восстановить в предыдущее состояние.

Я создал новую скрипку с примером использования одного контекста (не requestAnimationFrame):

http://jsfiddle.net/z5vtL/1/

Еще одна проблема с вашим кодом является то, что вы используете setInterval вместо window.requestAnimationFrame. Вы можете найти более подробную информацию по адресу:

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

Eh, что, черт возьми, обновленный JSFiddle использовать requestAnimationFrame:

http://jsfiddle.net/z5vtL/3/ (Обратите внимание на свойство скорости на каждом объекте)