Блог

Главная - Вопросы по программированию - почему фон не очищает круг?

почему фон не очищает круг?

#javascript #canvas

#javascript #холст

Вопрос:

Я хочу, чтобы мяч падал с гравитацией. Но фон не очистит предыдущий круг. (падающая часть еще не реализована) почему он не удаляет последний нарисованный объект?

 
let c, ctx;
let met;

let colorArray = ["green", "yellow", "orange", "red"];

window.onload = function(){
    c = document.getElementById("boom");
    ctx = c.getContext("2d");

    c.width = window.innerWidth - 165;
    c.height = window.innerHeight;

    setup();
    draw();
}

function setup(){
    met = new Meteor(200, 400, 10, 0, 5);
}


function draw(){
    window.requestAnimationFrame(draw);

    ctx.fillStyle = colorArray[Math.floor(Math.random() * colorArray.length)];
    ctx.fillRect(0, 0, c.width, c.height);

    met.draw();
    met.fall();
};


class Meteor {
    constructor(x, y, r, xSpeed, ySpeed){
        this.xPos = x;
        this.yPos = y;

        this.radius = r;

        this.xSpeed = xSpeed;
        this.ySpeed = ySpeed;

        this.color = "blue";

        this.acceleration = 0.5;

    }

    draw(){
        ctx.fillStyle = this.color;
        ctx.arc(this.xPos, this.yPos, this.radius, 0, 2 * Math.PI);
        //ctx.fill();
        ctx.stroke();
    }

    fall(){
        this.yPos  = (this.ySpeed);
    }

}

Кроме того, если у вас есть какие-либо советы о том, как придать ему гравитацию, пожалуйста, не стесняйтесь сообщать мне. Я уже некоторое время борюсь с этим.

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

1. Добавляйте ctx.beginPath(); перед тем, как рисовать шар. Чтобы имитировать гравитацию, вам нужно увеличить координату y относительно времени: y = v0*t (a*t**2)/2 .

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

Ответ №1:

draw() Добавьте это перед вызовом met.draw() :

 ctx.clearRect(0, 0, window.innerWidth, window.innterHeight)

Это очистит экран от каждого кадра.

Для gravity добавьте dt параметр в свою функцию рисования, а затем передайте его met.draw() следующим образом:

 function draw(dt){
    window.requestAnimationFrame(draw);

    ctx.fillStyle = colorArray[Math.floor(Math.random() * colorArray.length)];
    ctx.fillRect(0, 0, c.width, c.height);

    ctx.clearRect(0, 0, window.innerWidth, window.innterHeight) // Clear screen here
    met.draw(dt);
    met.fall();
};

Затем в Meteor классе используйте функцию dt in draw() для вычисления вашей позиции y на основе скорости. Здесь dt будет ваше дельта-время для вычисления.