Klar Canvas Rect (aber immer im hintergrund)

Ich versuche zu animieren, einen Kreis und nur Sie horizontal bewegen, welche gut funktioniert. Doch während der Kreis bewegt sich, ich muss ein clearRect über diesen Kreis so, dass Sie zieht es selbst in der horizontalen Richtung. Wenn ich eine clearRect es macht auch den hintergrund, eine weiße box, etwa so effektiv sein wird, eine weiße horizontale Linie in der Richtung sich der Kreis bewegt.

  1. Gibt es eine Möglichkeit zum löschen der Kreis ohne clearRect?
  2. Wenn ich ständig Neuzeichnen des Hintergrunds nach clearRect die Leinwand flimmern wird, wenn es sagen wir 10 Kreise in diesem Bereich.

Andere Ansätze zur Lösung dieser?

    function drawcircle() {
        clear();    

        context.beginPath();
        context.arc(X, Y, R, 0, 2*Math.PI, false);                  
        context.moveTo(X,Y);            
        context.lineWidth = 0.3;
        context.strokeStyle = "#999999"; 
        context.stroke();

        if (X > 200)
        {
            clearTimeout(t); //stop
        }
        else
        {
            //move in x dir
            X += dX;
            t = setTimeout(drawcircle, 50);
        }
    }

    function clear() {
        context.clearRect(X-R, Y-R, 2*R, 2*R);
    }
Ist der Kreis die einzige Sache, die gehen, um auf der Leinwand?
Nein, nicht, ich war anfangs etwas einfaches und dann in der Hoffnung, dass es mehr generische als ich die Einführung von mehr Kreise oder andere Formen. Habe ich noch nicht getestet, aber vielleicht konnten Sie seine Präsenz in einer fristgerechten Weise, wie es bewegt sich entlang der Leinwand? nur so ein Gedanke.

InformationsquelleAutor fes | 2011-04-08

  1. 25

    Grundlagen: HTML5 Canvas als Nicht-Erhalten-Zeichnung-Modus Grafik-API

    Erste, lassen Sie uns über die Art und Weise, in der das HTML5-Canvas-Werke. Wie ein real-Welt-Leinwand mit schnell trocknenden ölfarben, wenn Sie stroke() oder fill() oder drawImage() auf Ihre Leinwand, die Farbe wird zu einem Teil der Leinwand. Obwohl Sie zeichnete ein 'Kreis' und sehen Sie als solche, die Pixel der Kreis komplett ersetzt, die im hintergrund (oder im Fall von anti-aliasing an den Rändern des Kreises, gemischt mit und für immer geändert haben). Was hätte Monet dazu sagen, wenn Sie ihn gebeten, zu 'verschieben' einer der Menschen, die in einem Gemälde ein wenig nach rechts? Sie können nicht Kreis bewegen, können Sie nicht löschen Sie den Kreis, können Sie nicht erkennen mouseover des Kreises...weil es gibt keine Kreis, es ist nur ein einzelnes 2D-array von Pixeln.

    Einige Optionen

    1. Wenn Ihr hintergrund ist komplett statisch, legen Sie es als Hintergrundbild auf Ihrem canvas element via CSS. Dies wird angezeigt und überlagert mit den Inhalten, die Sie ziehen, aber die werden nicht gelöscht, wenn Sie klar Ihre Leinwand.

    2. Wenn Sie nicht oben sind, dann könnten Sie genauso gut löschen der gesamten Leinwand und wieder malen es jeden Rahmen. In meinen tests, die notwendige Arbeit zu löschen und neu zeichnen nur einen Teil der Leinwand ist nicht der Mühe Wert, es sei denn, Neuzeichnen des canvas ist sehr teuer.

      Beispielsweise finden Sie in diesem test: http://phrogz.net/tmp/image_move_sprites_canvas.html

      In Safari v5.0.4 sehe ich auf 59,4 fps, wenn ich löschen und neu zu zeichnen die gesamte Leinwand einmal pro frame, und 56.8 fps, wenn ich mit 20 clearRect() Anrufe und 20 drawImage() Anrufe zu re-draw, nur die beschmutzt Teil des Hintergrunds in jedem frame. In diesem Fall ist es langsamer, clever zu sein und halten kleine dreckige Regionen.

    3. Als weitere alternative, verwenden Sie eine beibehalten-Zeichnung-Grafik-system wie SVG oder HTML. Mit diesen, jedes element ist die eigenständig instandzuhalten sind. Sie können ändern Sie die position des Elements, und es wird auf Magische Weise bewegen; es ist bis zu den browser-intelligent zeichnen das update auf die effizienteste Art und Weise möglich.

      Können Sie dies tun, während gleichzeitig die macht der Gewohnheit Leinwand-Zeichnung erzeugen und überlagern mehrerer Gemälde in der gleichen HTML-Seite (mit CSS absolute Positionierung und z-index). Wie in dieser performance-test, bewegen 20 über CSS-sprites ist deutlich schneller, als zu versuchen, es zu tun alles selbst auf einer einzigen Leinwand.

    Flackern?

    Sie schrieb:

    Wenn ich ständig Neuzeichnen des Hintergrunds nach clearRect die Leinwand flimmern wird, wenn es sagen wir 10 Kreise in diesem Bereich.

    Das war nie meine Erfahrung. Können Sie uns ein kleines Beispiel zeigt, dieses 'flackern' problem, das Sie Anspruch auftreten (geben Sie bitte Betriebssystem, browser und version, dass Sie diese Erfahrung auf)? Hier sind zwei Kommentare von bekannten browser-Entwickler darauf hingewiesen, dass weder Firefox noch Safari sollte immer zeigen keinerlei flimmern.

    Das ist sehr hilfreich, ich wurde die Umsetzung der gesamten Leinwand Zeug ohne nachdenken über die html/css-Aspekt bei all dem ist ein Fehler in meinem Namen. In Bezug auf das flackern, ich war unter dem Eindruck, denn ich muss Neuzeichnen des canvas in verschiedenen Abständen verschiedene Dinge bewegt, auf der Leinwand, dass es könnte dazu führen, flackern die möglicherweise oder möglicherweise nicht der Fall sein. Wenn ich sehen das flimmern, ich werde auf jeden Fall Bericht erstatten. danke.
    Auch ich habe schon bemerkt flimmern auf meinem Penthium 4 Ubuntu-system. Das problem ist vor allem beim schnellen Wechsel zwischen 3 Farben. Erstellen von einfachen Rechteck mit drei Farben (rot, natürlich, grün auf die Maus drücken und blau auf Maustaste loslassen), wenn Sie auf schnell sieht es aus wie es gibt verschiedene horizontale Streifen von rot, grün und/oder blau.
    Was Sie beschreiben, ist screen tearing, eine fehlende v-sync. Doppel- (oder dreifach-, oder vierfach-) Pufferung kann nicht helfen. Es erfordert die rendering-API (web-browser) synchronisiert werden, um die Bildwiederholrate des Monitors. Siehe auch Riss in HTML5-Canvas.

    InformationsquelleAutor

  2. 1

    Dies ist eigentlich sehr einfach zu bewerkstelligen, indem Sie einfach die Positionierung mehr als eine Leinwand, auf der jeweils anderen. Sie können ziehen Sie Ihren hintergrund auf eine Leinwand, die (wait for it...) in den hintergrund, und ziehen Ihre Kreise auf eine zweite Leinwand, im Vordergrund. (D. H. gestapelt vor dem hintergrund Leinwand)

    Mehrere Leinwände ist tatsächlich eine der besten Möglichkeiten, um die Leistung zu erhöhen von etwas animation, wo die Elemente des Bildes bewegen sich unabhängig und nicht unbedingt verschieben in jedem Einzelbild. Dies können Sie vermeiden Neuzeichnen Elemente, die nicht verschoben haben, in jedem frame. Allerdings ist eine Sache im Auge zu behalten ist, dass eine änderung der relativen Tiefe (man denke z-index) der Elemente gezogen, die auf verschiedenen Leinwänden erfordert nun, dass der tatsächliche <canvas> Elemente werden neu angeordnet in der dom. In der Praxis ist dies selten ein Problem für 2D-Spiele und-Animationen.

    InformationsquelleAutor

  3. 0

    Gibt es zwei Möglichkeiten, Sie können es tun, kann die Reduzierung des flimmerns, esp wenn Sie viele Kreise.

    Ist double buffering, und für eine kurze Frage auf diesem können Sie sehen unter:
    Hat HTML5/Canvas Unterstützen Double Buffering?

    Im Grunde, Sie zeichnen auf zwei Leinwände, und tauschen Sie in die und aus, wie gebraucht.

    Wäre dies die bevorzugte option, esp mit vielen änderungen pro frame, aber, die andere Möglichkeit habe ich dies getan ist, ziehen Sie einfach über den Kreis möchte ich löschen, verwenden Sie die hintergrund-Farbe, zeichnen Sie dann mit der richtigen Farbe den neuen Kreis.

    Das problem ist nur, dass es eine kleine chance, dass Sie könnte einige Beweise für die versuchte Auslöschung, wie es scheint, dass für manche Formen ist es schwer es zu zeichnen, genau an der Spitze.

    UPDATE:

    Basierend auf einen Kommentar Sie können sich diese Diskussion um die doppelte Pufferung auf der Leinwand:

    HTML-canvas double-buffering frame-rate-Probleme

    Die grundlegende Idee ist, den überblick zu behalten, das Sie gezeichnet haben, mit der aktuellen position, dann auf einer separaten Leinwand, die Sie neu zeichnen, alles, dann, drehen Sie Sie heraus, und dann würde ich nur neu zeichnen, wieder, in die neuen Positionen, um sicherzustellen, dass das Bild genauso aussieht, wie es sollte. Tauschen Sie in-und out ist eine schnelle operation, das problem wäre nur, wenn man event-Handler auf die Leinwand, in diesem Fall, haben Sie auf die div-oder span-rund um die Leinwand, so dass diese Informationen nicht verloren gehen.

    Was, wenn Sie bewegen Sie den Kreis von einem Bereich zu einem anderen Bereich auf der Leinwand, hat hintergrund schon gezogen. Wie sich der Kreis in dieses neue hintergrund-region, sein gehen zu beginnen, weißen Boxen erscheinen auf diesem hintergrund auch, die wäre nicht allzu groß. Ich denke, Sie müssen sich anpassen, den hintergrund für diese Bewegung. Machen Sie den hintergrund einfach weiß löst alle clearRect aber es wäre schön, wenn es ein transparentes clearRect oder deaktivieren Sie einfach die gezeichnete Form selbst.
    Ich wäre sehr daran interessiert, wenn Sie könnten, produzieren alle HTML5-canvas-Beispiel-Inhalte auf jedem browser, wo Doppel-Pufferung über zwei Leinwände, die tut alles andere als verlangsamt Ihre Anwendung. Soweit ich weiß, werden alle HTML5-canvas-Implementierungen sind bereits double-buffered, wie die JavaScript-Aufrufe in eine Warteschlange eingereiht sind/verschmolz mit dem sichtbaren Aktualisierungen werden nur durchgeführt, wenn das Skript wieder die Kontrolle an den browser. Ich bin unsanft downvoting, weil ich glaube, das ist FUD Rat. Wird upvote, wenn Sie zeigen können, ein problem Fall.
    Nur weil die Leinwand-Umsetzung ist doppelt gepuffert bedeutet, dass Sie zwei Leinwände, eine zu zeichnen und angezeigt, dann drehen, nicht gehen, um eine schlechte option.

    InformationsquelleAutor

Schreibe einen Kommentar