|
Canvas. Как остановить анимацию кнопкой?
Всем привет. Я начинающий) Как остановить движение анимации в канвас? создала квадрат, который при нажатии на кнопку движется вперед-назад по канвасу. Другая кнопка должна его остановить. Мои варианты были такие:
const canvas = document.querySelector('#cl');
const ctx = canvas.getContext('2d');
let n=2; //скорость
let x = 10;
let y = 10;
function draw(x,y) {
ctx.fillStyle = 'green';
ctx.fillRect(x,y,50,50);
}
draw(x,y); // чтоб квадрат был всегда нарисован на экране
let move_sqare = document.querySelector("#startBtn");
move_sqare.addEventListener("click", function move () {
ctx.clearRect(0,0, canvas.width, canvas.height)
draw(x,y);
x += n;
if (x > canvas.width-50 || x < 0) {
n = -n
}
requestAnimationFrame(move)
});
let stop_sqare = document.querySelector("#stopBtn");
stop_sqare.addEventListener("click", function stopmove () {
ctx.clearRect(0,0, canvas.width, canvas.height)
draw(x,y);
n = 0;
x += n;
});
Элемент останавливается, но больше кнопки не работают =(( Еще пыталась с cancelAnimationFrame но что-то не вышло . Помогите , пожалуйста, кто разбирается.
|
