Ich verwende <canvas> , um alle Notizen und Glyphen in meinen Musikausbildungs-Web-Apps zu zeichnen:
Ссылка
Ein Benutzer von Firefox 15.0.1 hat berichtet, dass die Übung manchmal mit der nächsten Frage fortfährt, aber die Leinwand zeigt immer noch die vorherige Frage an. Ich habe gesehen, dass dies bei Tests einmal auftrat (von ~ 500 Fragen).
Wenn dies der Fall ist, wurde die Zeichenfläche sowohl mit canvas.width = canvas.width als auch mit einem Aufruf von .clearRect im Kontext gelöscht, und Zeichen wurden in JavaScript über .beginPath , .quadraticCurveTo , .closePath usw. gezeichnet Es scheint so, als ob der Hintergrundpuffer des Canvas niemals in das Fenster geleert wird.
Ich habe in der Vergangenheit Fehlerberichte über ähnliche Probleme gesehen:
Ich kann ein Neuzeichnen erzwingen, indem ich einen DOM-Hack einfüge, z. B. einen Textknoten als untergeordnetes Element der Zeichenfläche einfüge und ihn dann im nächsten Durchlauf-Schleifenzyklus entferne oder die Hintergrundfarbe oder das Padding der Zeichenfläche modifiziere. Dies scheint jedoch schwerfällig zu sein, und ich habe immer wieder das Gefühl, dass mir etwas offensichtlich fehlt.
Mein Zeichencode ist einfach genug:
%Vor% Ich habe sichergestellt, dass die Anzahl der Aufrufe .save und .restore ausgeglichen ist.
1) Ich rufe diesen Code direkt als Antwort auf einen onclick Event-Handler auf. Soll ich stattdessen requestAnimationFrame oder setTimeout verwenden, um die Zeichnung in einem zukünftigen Laufzykluszyklus auszuführen?
2) Ich vermisse nichts Offensichtliches, wie eine canvas.pleaseRepaintNow() API, oder?
3) Haben andere Personen ähnliche Probleme festgestellt und zur DOM-Änderung zurückgegriffen, um Neuzeichnungen zu erzwingen?
Fügen Sie context.stroke(); zur letzten Zeile Ihrer onLoad -Funktion hinzu, es behebt einen Fehler in Firefox. Andernfalls werden Änderungen an der Arbeitsfläche erst wiedergegeben, wenn das Fenster neu gezeichnet wird.
Es hat zumindest in meinem Fall funktioniert.
%Vor%Ich habe versucht, den Fehler zu bekommen, aber nachdem ich eine Weile in Firefox getippt habe, habe ich ihn nie gesehen. Dies ist, wie ich die Leinwand lösche, die zu funktionieren scheint, aber nehmen Sie es mit einem Körnchen Salz, da ich den Fehler nicht auftreten kann, kann ich auch nicht überprüfen, ob das irgendetwas behebt ...
%Vor%Tags und Links javascript canvas redraw