Tutorial instance HTML5: Tag Canvas mengimplementasikan transformasi matriks

Artikel Pengenalan Wulin.com (www.vevb.com): Aplikasi tag kanvas untuk praktik harian HTML5 - transformasi matriks.

Sejauh ini, kami telah mempelajari teknologi transformasi grafik yang diimplementasikan dengan menggunakan transformasi koordinat. Ketika transformasi koordinat tidak dapat memenuhi kebutuhan kita, kita dapat menggunakan teknologi transformasi matriks. Selanjutnya, kami akan memperkenalkan transformasi matriks yang lebih kompleks dan teknik deformasi.

Matriks digunakan secara khusus untuk mencapai deformasi grafik. Ini digunakan bersama dengan koordinat untuk mencapai tujuan deformasi. Ketika konteks grafik dibuat, matriks transformasi default sebenarnya dibuat. Jika matriks ini tidak dimodifikasi, gambar yang ditarik berikutnya akan menggambar gambar dengan sudut kiri atas kanvas sebagai asal koordinat. Sosok yang ditarik tidak akan diskalakan dan cacat. Namun, jika matriks transformasi ini dimodifikasi, situasinya akan berbeda.

Metode Transformasi

context.transform (a, b, c, d, x, y);

Metode ini memiliki 6 parameter, di antaranya empat parameter A, B, C, dan D terutama digunakan untuk mengubah bentuk gambar; X dan Y mewakili titik koordinat bergerak.

Tiga metode yang disebutkan di bagian sebelumnya menggunakan transformasi koordinat untuk deformasi grafik:

terjemahan (x, y);

skala (x, y);

putar (sudut);

Mereka semua dapat digantikan dengan metode transformasi, dan enam parameter dalam konteks.transform (a, b, c, d, x, y); adalah sebagai berikut:

terjemahan (x, y);

skala (a, d);

Rotate (b, c); // metode ini sebenarnya hanya memiliki satu parameter. Untuk memfasilitasi pemahaman dan sesuai dengan transformasi, 2 parameter yang tersisa digunakan. Saya letakkan di sini untuk memberi tahu Anda bahwa kedua parameter ini memiliki fungsi yang serupa dan terkait dengan rotasi.

Kasus kode