Dieser Artikel teilt das Implementierungsprinzip, den Implementierungscode und die Probleme, die im Implementierungsprozess von Canvas auftreten, die Animation für Ihre Referenz löschen. Der spezifische Inhalt ist wie folgt
Das Prinzip besteht darin, ein bestimmtes Bild auf einem mobilen Gerät zu löschen und ein anderes Bild anzuzeigen, wobei Canvas es implementieren kann.
Wenn der Benutzer manuell ausgeht, müssen Sie nach Touchmove, Touchend und anderen Ereignissen zuhören, die entsprechenden Koordinaten berechnen und Canvas 'ClearRect oder Rect verwenden, um Bögen oder Linien zu zeichnen, um dies zu erreichen. Dies führt jedoch zu Verzögerungen bei Androd -Telefonen.
Canvas verfügt über eine GlobalCompositeoperation -Eigenschaft. Der Standardwert dieser Eigenschaft ist die Quelle, dh sie wird überlagert, wenn Sie auf vorhandene Pixel zurückgreifen. Es gibt jedoch ein weiteres Attribut, das Ziel-Out ist, dh bei der Anzeige Ihres Zielbildes außerhalb des Quellbildes werden bei der Zeichnung auf der Grundlage vorhandener Pixel die vorhandenen Pixel im Bereich, den Sie zeichnen, transparent eingestellt. Mit diesem Attribut bedeutet dies, dass Sie keine Reihe von Funktionen wie Clip verwenden müssen. Sie können nur dicke Linien oder Bögen verwenden. Dies reduziert die Aufrufe der API der Zeichenumgebung, verbessert die Leistung und läuft viel reibungsloser auf Android.
Hier ist mein Löschcode :
Lassen Sie RequestAnimationFrame = Fenster.RequestanimationFrame || || window.mozRequestanimationFrame || window.webkitRequestanimationFrame || window.msRequestanimationFrame; lass CancelAnimationFrame = Fenster.CancelanimationFrame || Fenster.MozcancelanimationFrame; Sei a = 60; lass Canvascleaner = document.getElementById ('Cas-1'); lass ctxCleaner = canvascleaner.getContext ('2d'); let Canvascleaner = document.querySector ('. canvascleanerbox.clientwidth * 2; canvascleaner.height = canvascleanerbox.clientHeight * 2; canvascleaner.style 'https://gw.alicdn.com/tps/tb1xByckvxxxxxxpxxxxxxxxxx-1080-1920.jpg'iMgCleaner.onload = () => {let width = papseInt (canvascleaner.style.style.width); w = canvascleaner.width*(imgcleaner.height/imgCleaner.width); ctxcleaner.drawimage (ImgCleaner, 0, 0, canvascleaner.width, w); ctxCleaner.linecap = 'Round'; // Linecap -Eigenschaft setzt oder gibt den Stil der Linienkappe am Ende der Linie zurück. ctxCleaner.LineJoin = 'Round'; ctxCleaner.lineWidth = 100; // Die Breite der aktuellen Zeile ctxCleaner.globalCompositeoperation = 'Ziel-out';} let Dractline = (x1, y1, ctx) => {ctx.save (); ctx.beginPath (); ctx.arc (x1, y1, a, 0, 2 * math.pi); ctx.fill (); // fill () Methode füllt das aktuelle Bild (Pfad). Die Standardfarbe ist schwarz. ctx.restore ();};/* d Um die Koordinaten des Flächenpunkts zu löschen, sind die Daten, die ich erhalten habe, indem ich die Formen simuliert, die von mir selbst gelöscht werden müssen, ähnlich wie folgt: sei d2 = [ [1,190], [30.180], [60.170], [90,168], [120,167], [150,165] [180,164], [210,163], [240,160], [270,159], [300.154], [330,152], [330,154], [330,154], [330,154], [330,152], [330,153], [330,154]. [390,150], [420,140], [450,130], [480,120], [510,120], [540,120], [570,120], [600.120], [630.120], [660,120], [690,120], [720,120], [1,190], [20, 189], [28, 186], [45, 185], [50, 185], [62,184], [64.182], [90,180], [120,178],,,,,,,, [64.182], [90,180], [120,178],,,,,,, [64.182], [90,180], [120,178],,,,,,, [64.182], [90,180], [120,178],,, [160,176], [200,174], [240,172];*/let draw = (d, ctx) => {if (idx> = d.Length) {cornAnimationFrame (ts); } else {Drawline (d [idx] [0], d [idx] [1], ctx); idx ++; RequestAnimationFrame (() => {draw (d, ctx);}); }}Da ich die Löschanimation direkt auf der Seite anzeige und nicht verlangt, dass der Benutzer sie selbst löscht, werden die Koordinaten des Löschbereichs von mir selbst berechnet. Verwenden Sie dann RequestAnimationFrame , um Animation zu implementieren. Ich habe mit SetInterval angefangen. Ich stellte fest, dass das SetInterval danach immer durcheinander gebracht wird, daher wird empfohlen, SetInterval nicht zu verwenden.
Beim Erreichen dieses Effekts stellte ich fest, dass das Bild bei der Verwendung von Leinwand zum Zeichnen auf der Seite sehr verschwommen wird?
Es stellt sich heraus, dass es in der Fenstervariablen des Browsers eine DevicePixelratio -Eigenschaft befindet, die feststellt, dass der Browser mehrere (normalerweise 2) Pixelpunkte verwendet, um ein Pixel zu rendern. Das heißt, unter der Annahme, dass der Wert von DevicePixelratio 2 beträgt, wird ein Bild mit einer Größe von 100*100 Pixel mit der Breite von 2 Pixel im Bild gerendert. Daher wird das Bild tatsächlich 200*200 Pixel auf dem Retina -Bildschirm einnehmen, was dem zweimal vergrößerten Bild entspricht, sodass das Bild verschwommen ist.
Auf diese Weise wird das Problem mit Leinwand leicht zu lösen. Wir können Leinwand als Bild behandeln. Wenn der Browser Leinwand rendert, verwendet er die Breite von 2 Pixel, um Leinwand zu rendern, sodass das gezogene Bild oder Text in den meisten Retina -Geräten verschwommen ist.
In ähnlicher Weise gibt es im Canvas -Kontext auch eine WebkitbackingStorePixelratio -Eigenschaft (nur Safari und Chrome). Der Wert dieser Eigenschaft stellt fest, dass der Browser mehrere Pixel verwendet, um Leinwandinformationen vor dem Rendern von Leinwand zu speichern. Der Wert in Safari unter iOS6 beträgt 2., wenn ein 100*100 -Bild in Safari gezeichnet wird, das Bild zuerst ein 200*200 -Bild im Gedächtnis erzeugt, und wenn der Browser es rendert, wird es es als 100x100 -Bild rendern, so dass es 200x200 gleich ist, wie das Bild im Gedächtnis, sodass keine Distortion -Probleme auf IOS sind. In Chrom und iOS7 gibt es jedoch Verzerrungen in Safari. Der Grund dafür ist, dass die WebkitbackingStorePixelratio -Werte von Safari in Chrome und iOS7 beide 1 sind.
Lösung:
canvas.width = canvasbox.clientwidth * 2; canvas.height = canvasbox.clientHeight * 2; canvas.style.width = canvas.clientwidth + 'px'; canvas.style.height = canvas.clientHeight * 'px'; // console.log (w); ctx.drawimage (IMG, 0, 0, canvas.width, w);
Das heißt, Sie können eine Leinwand erstellen, die doppelt so groß ist wie die tatsächliche Größe, und dann den CSS -Stil verwenden, um die Leinwand auf die tatsächliche Größe zu beschränken. Oder verwenden Sie diese Polyfill auf GitHub, aber ich habe es versucht und es scheint nicht zu funktionieren.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.