Ringkasan perkara yang perlu diberi perhatian apabila menggunakan kemahiran tutorial canvas_html5

1. tutorial Cina kanvas https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial

2. Lebar dan ketinggian lalai kanvas ialah 300 dan 150. Untuk mengelakkan pengecualian, sebaiknya gunakan atribut paparan untuk menambahnya penyemak imbas menyokong kanvas melalui kod js berikut





Salin kod

Kodnya adalah seperti berikut: var canvas = document.getElementById('tutorial ');

if (canvas.getContext){

var ctx = canvas.getContext('2d'); } lain {

// kod tidak disokong kanvas di sini
}


5 Kanvas hanya menyokong lukisan satu bentuk asas, iaitu segi empat tepat, tetapi grafik lain boleh dilukis melaluinya laluan kanvas

6. Lukiskan segi empat tepat Terdapat empat fungsi: rect, fillRect, strokeRect dan clearRect

7. beginPath digunakan untuk memulakan lapisan laluan baharu, ia bermakna melukis lapisan laluan asal Kesan dua keping kod berikut adalah berbeza sama sekali, kod pertama menunjukkan dua garis merah, kod kedua menunjukkan satu garis hitam dan satu garis merah

Salin kod

Kod adalah seperti berikut:

var ctx = document.getElementById('cvs').getContext('2d'); ctx.beginPath(); ctx.moveTo (100.5,20.5); ,40.5);

ctx.lineTo(200.5,40.5)

ctx.strokeStyle = '#f00'; >

Salin kod


Kod adalah seperti berikut:


var ctx = document.getElementById('cvs').getContext( '2d');
ctx.beginPath();
ctx.moveTo(100.5,20.5); ctx.beginPath();

ctx.moveTo(100.5,40.5);


8. Wenn Sie den Pfad nicht schließen müssen, müssen Sie closePath nicht verwenden. Wenn Sie fill verwenden, ist die Verwendung von closePath nicht mehr erforderlich 🎜>9. Solange Sie genug Geduld haben, können Sie damit beliebige Grafiken zeichnen

10. Es gibt einen Fehler in der quadratischen Kurve unter Firefox kann anstelle der quadratischen Kurve verwendet werden

11. Bilder (wie PNG, GIF, JPEG usw.) können in die Leinwand eingefügt werden, und andere Leinwandelemente können auch als Bildquelle verwendet werden

12. Das Folgende ist der grundlegende Code zum Zeichnen von Leinwandbildern, wobei Bild ein Bild oder Leinwandobjekt ist, x und y seine Startkoordinaten in der Zielleinwand sind

drawImage(image, x, y)
Der folgende Code stellt die Skalierung des Bildes dar, Breite und Höhe repräsentieren die gezoomte Größe
drawImage(image, x , y, width, height)
Der folgende Code stellt das Ausschneiden eines Bildes dar. Der erste Parameter ist Wie die anderen sind beide Verweise auf ein Bild oder eine andere Leinwand. Die anderen acht Parameter stellen jeweils die Start-X-Koordinate des Zuschnitts im Bild, die Start-Y-Koordinate des Zuschnitts im Bild, die Breite des Zuschneidebereichs, die Höhe des Zuschneidebereichs, die X-Koordinate der gezeichneten Position und das Y dar Koordinate der gezeichneten Position und die Breite der gezeichneten Grafik. Die Höhe der gezeichneten Grafik und die Größe des Zuschneidebereichs können von der Größe der gezeichneten Grafik abweichen. In diesem Fall wird sie auf die Größe von skaliert das gezeichnete Bild

drawImage(image, sx, sy, sWidth, sHeight, dx , dy, dWidth, dHeight)
13. StrokeStyle wird verwendet, um die Farbe des Grafikumrisses festzulegen, und fillStyle wird verwendet , um die Füllfarbe festzulegen. Farbe kann eine Zeichenfolge sein, die einen CSS-Farbwert, ein Verlaufsobjekt oder ein Musterobjekt darstellt. Standardmäßig sind die Linien- und Füllfarben Schwarz (CSS-Farbwert #000000).

14. Die Bildtransparenz kann durch globalAlpha = Transparenzwert oder RGBA-Farbwert dargestellt werden

15. Das lineWidth-Attribut legt die Dicke der aktuell gezeichneten Linie fest Fehlerproblem, 0,5 wird verwendet. Möglichkeiten zur Lösung

16. Die Zeile ganz links des lineCap-Attributs verwendet die Standardschaltfläche. Beachten Sie, dass es bündig mit der Führungslinie abschließt. Der mittlere Effekt ist der runde Effekt, bei dem am Endpunkt ein Halbkreis mit einem Radius von der halben Linienbreite hinzugefügt wird. Die rechte Seite ist der Effekt eines Quadrats, bei dem ein Quadrat gleicher Breite und halber Linienbreite zum Endpunkt hinzugefügt wird

17 Hier verwende ich auch drei Polylinien als Beispiel und stelle unterschiedliche lineJoin ein Werte bzw. Der obere Effekt ist rund, die Ecken sind abgerundet und der Radius des Kreises entspricht der Linienbreite. Die mittleren und unteren Linien sind die Auswirkungen von Abschrägung bzw. Gehrung. Wenn der Wert „Gehrung“ lautet, wird das Liniensegment über die Verbindung hinaus verlängert, bis es sich an einem Punkt schneidet. Der Erweiterungseffekt wird durch das unten einzuführende „mitreLimit“-Attribut eingeschränkt. Die Speicher- und Wiederherstellungsmethoden werden verwendet Speichern und Wiederherstellen des Canvas-Status, alle haben keine Parameter. Der Zustand der Leinwand ist eine Momentaufnahme aller Stile und Transformationen, die auf den aktuellen Bildschirm angewendet werden. Der Canvas-Status wird in einem Stapel gespeichert. Bei jedem Aufruf der Speichermethode wird der aktuelle Status in den Stapel verschoben und gespeichert. Bei jedem Aufruf der Wiederherstellungsmethode wird der zuletzt gespeicherte Status aus dem Heap entfernt und alle Einstellungen werden wiederhergestellt.

19. Die Transformationsparameter (1, 0, 0, 1, 0, 0) repräsentieren horizontale Skalierung, horizontale Drehung (im Uhrzeigersinn), vertikale Drehung (gegen den Uhrzeigersinn), vertikale Skalierung, horizontale Richtungsverschiebung und vertikale Verschiebung
　setTransform(1, 0, 0, 1, 0, 0) bedeutet, die vorherige Transformationsmatrix zurückzusetzen und dann eine neue Matrix zu erstellen. Die Parameterfunktion ist die gleiche wie oben
rotate(angle) , (ein Radius ist gleich 1 Bogenmaß, 2πr/r=Bogenmaß, also 360=2π, also 1=π/180)

20 Die Animation dient eigentlich dazu, das Zeichenbrett kontinuierlich zu löschen (clearRect()). ) und zeichnen Sie es dann neu