Блог

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

 var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");

const ParticleFactory = function(){
    this.interval = 100;
    this.lastOutput = Date.now();
    this.particles = [];
}

ParticleFactory.prototype.tick = function(){
    if (Date.now() > this.lastOutput   this.interval) {
        const particle = new Particle(500, 100, 4);
        this.particles.push(particle);
        this.lastOutput = Date.now();
    }
    for (var i=0; i < this.particles.length; i  ) {
        this.particles[i].tick();
    };
}
ParticleFactory.prototype.draw = function(){
    for (var i=0; i < this.particles.length; i  ) {
        this.particles[i].draw();
    };
}
ParticleFactory.prototype.del = function(toDelete){
    this.particles = this.particles.filter(item => item !== toDelete);
}
const Particle = function(x, y, r){
    this.x = x;
    this.y = y;
    this.r = r;
}

Particle.prototype.tick = function(){
    this.x -= 0.1;
}
Particle.prototype.draw = function(){

    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
    ctx.fillStyle = "rgb(0, 0, 255)";
    ctx.fill();
    ctx.closePath();
}
// Definitions
let particleFactory = new ParticleFactory;

function draw(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particleFactory.draw();

}
function tick(){
    particleFactory.tick();

    draw()
    window.requestAnimationFrame(tick)
}

document.addEventListener("DOMContentLoaded", function() {
    tick();
});
  

ctx.clearRect() не очищает курсор, который отрисовывается при каждом тике Particle.draw()

Точка перемещается и оставляет за собой след, даже если ctx.clearRect() запускается перед каждым рисованием.