Блог

Главная - Вопросы по программированию - У меня возникли проблемы с перемещением прямоугольника на холсте

У меня возникли проблемы с перемещением прямоугольника на холсте

#javascript #canvas #rect

#javascript #холст #прямоугольник

Вопрос:

Я создал скрипт для перемещения прямоугольника, но по мере его перемещения предыдущие не удаляются с холста.

Вот мой javascript.

 const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const box =25;
let snake=[];
snake[0]={x:5*box,y:4*box}

function draw(){
    ctx.rect(snake[0].x, snake[0].y, box, box);

    ctx.fillStroke="black";

    ctx.strokeRect(snake[0].x, snake[0].y, box, box);

    snake.pop();
    snake.unshift({x:6*box,y:4*box});
}

let game=setInterval(draw,100)  
 <canvas></canvas>

Комментарии:

1. вставьте свой код html и css, пожалуйста

2. @sergeykuznetsov Я отредактировал это из сообщения, потому что это не требовалось для этой проблемы, он искал решение для трейлинга на холсте, что является проблемой javascript. Если вам было интересно, CSS был границей размером 10 пикселей, а html был холстом.

Ответ №1:

Вы можете создавать объект ctx.clearRect на холсте при запуске каждого draw вызова функции, и это сделает это за вас

 const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const box = 25;
let snake = [];
snake[0] = {
  x: 5 * box,
  y: 4 * box
}

function draw() {

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

  ctx.rect(snake[0].x, snake[0].y, box, box);

  ctx.fillStroke = "black";


  ctx.strokeRect(snake[0].x, snake[0].y, box, box);

  snake.pop();
  snake.unshift({
    x: 6 * box,
    y: 4 * box
  });


}

let game = setInterval(draw, 350)  
 <canvas id=canvas></canvas>

Ответ №2:

Вот правильный способ создания анимации с помощью canvas:

Итак, вы должны создать анимационный фрейм, который canvas может использовать для перерисовки прямоугольника при каждом его перемещении.

Ваша проблема в том, что вы рисуете один и тот же холст поверх самого себя, поэтому используйте ctx.clearRect(0, 0, cvs.width, cvs.height) для очистки всего холста.

Также…. Пожалуйста, НИКОГДА не используйте интервалы при рисовании на холсте. Используйте только кадры анимации, как в моей функции. Просто поместите это в конец вашей основной функции рисования, и это будет повторяться вечно.

Прокрутите вниз и нажмите «Выполнить фрагмент кода», чтобы увидеть, как мой пример запускается в браузере. Как вы заметили, прямоугольник будет перемещаться плавно и не оставит за собой следов.

 const cvs = document.querySelector(".canvas"),
    ctx = cvs.getContext("2d");

let rectX = -30;

function init() {
    ctx.width = 300;
    ctx.height = 300;
    ctx.clearRect(0, 0, cvs.width, cvs.height);
    ctx.fillRect(rectX - 25, cvs.height / 2 - 25, 50, 50);
    rectX  ;
    if (rectX > 325) {
        rectX = -25;
    }
    window.requestAnimationFrame(init);
}

init();  
 <canvas class="canvas" style="border:1px solid black"></canvas>