clearRect funktioniert nicht

Lesezeit: 3 Minuten

clearRect funktioniert nicht
nur ein anderer Hobbyist

Ich mache ein Pong-Spiel in Javascript, um das Erstellen von Spielen zu lernen, und ich möchte es objektorientiert machen.

Ich kann nicht clearRect arbeiten. Es zeichnet lediglich eine Linie, die länger wird. Hier der entsprechende Code:

function Ball(){
    this.radius = 5;
    this.Y = 20;
    this.X = 25;
    this.draw = function() {
        ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
        ctx.fillStyle="#00ff00";
        ctx.fill();
    };
}

var ball = new Ball();

function draw(){
    player.draw();
    ball.draw();
}

function update(){
    ctx.clearRect(0, 0, 800, 400);
    draw();
    ball.X++;
}

Ich habe versucht, die zu setzen ctx.clearRect Teil in der draw() und ball.draw() funktioniert und es funktioniert nicht. Ich habe es auch versucht fillRect mit Weiß, aber es gibt die gleichen Ergebnisse. Wie kann ich das beheben?

  • Können Sie dies auf jsFiddle einrichten, um dies zu erklären Zeichne eine Linie, die länger wird?

    – Alex

    16. März 2012 um 19:02 Uhr


  • Ich habe es früher versucht und konnte es dort nicht zum Laufen bringen, ich werde es noch einmal versuchen.

    – nur ein weiterer Hobbyist

    16. März 2012 um 19:04 Uhr

  • Ich weiß nicht, wie man JSFiddle benutzt, nichts aus dem Javascript-Stück wird enthalten. Ich habe den Code trotzdem dort gespeichert, vielleicht können Sie ihn zum Laufen bringen: jsfiddle.net/hustlerinc/25qWe

    – nur ein weiterer Hobbyist

    16. März 2012 um 19:08 Uhr


clearRect funktioniert nicht
Alex

Dein Real Das Problem ist, dass Sie den Pfad Ihres Kreises nicht schließen.

Addieren ctx.beginPath() bevor du den Kreis zeichnest.

jsFiddle.

Außerdem ein paar Tipps…

  • Ihr Vermögen sollte nicht dafür verantwortlich sein, sich selbst zu zeichnen (ihre draw() Methode). Definieren Sie stattdessen vielleicht ihre visuellen Eigenschaften (ist es ein Kreis? Radius?) Und überlassen Sie es Ihrer Hauptrenderfunktion canvas bestimmte Zeichnung (dies hat auch den Vorteil, dass Sie Ihren Renderer später problemlos auf reguläre DOM-Elemente oder WebGL umstellen können).
  • Anstatt setInterval()verwenden requestAnimationFrame(). Der Support ist im Moment nicht so toll, also möchten Sie vielleicht seine Funktionalität mit Shim versehen setInterval() oder rekursiv setTimeout() Muster.
  • Dein clearRect() sollten die Maße aus dem übergeben werden canvas -Element (oder irgendwo definiert haben). Sie in Ihre Rendering-Funktionen einzubeziehen ist vergleichbar mit magische Zahlen und könnte später zu einem Wartungsproblem führen.

  • Wow, das war unerwartet einfach. Was genau macht dieser Code?

    – nur ein weiterer Hobbyist

    16. März 2012 um 19:14 Uhr


  • Der Teil “viewport.width = viewport.width” Ich meine clearRect erklärt sich selbst, ich verstehe nicht, was der andere tut, um die Leinwand zu löschen. Und danke für die Tipps. =)

    – nur ein weiterer Hobbyist

    16. März 2012 um 19:22 Uhr


  • @hustlerinc Es ist ein bisschen wie ein Hack. Grundsätzlich stützt es sich auf die canvas Renderer, der seinen Inhalt löscht, wenn sich seine Abmessungen ändern.

    – Alex

    16. März 2012 um 19:24 Uhr

  • Ok, ich verstehe, und jetzt, wo ich beginPath hinzugefügt habe, funktioniert clearRect wieder, ich hatte tatsächlich sowohl begin als auch closePath, aber entfernte sie, um zu sehen, ob etwas kaputt ging (bevor sich der Kreis bewegte), da sich nichts geändert hatte, ließ ich es so: P. Was ist das Beste für die Leistung, wissen Sie? clearRect, fillRect mit Farbe oder der Hack?

    – nur ein weiterer Hobbyist

    16. März 2012 um 19:30 Uhr

  • @hustlerinc IIRC, der Hack ist langsamer. Es ist auch ein Hack, also würde ich dabei bleiben clearRect(). Sie könnten auch wie John Carmack sein und verwenden adaptive Kachelaktualisierungaber es ist bei den heutigen Computern nicht mehr nötig (Spaß beiseite, es kann Spaß machen, den Überblick zu behalten, wo alle Objekte wurden und nur die Unterschiede darstellen).

    – Alex

    16. März 2012 um 19:33 Uhr


996490cookie-checkclearRect funktioniert nicht

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy