Seperti yang kita ketahui bersama, kanvas adalah bitmap, dan Anda dapat merender apa yang Anda inginkan di dalamnya, namun Anda hanya dapat mengeditnya dengan memanipulasi properti kanvas. Artinya, Anda tidak dapat memanipulasi benda yang digambar ke dalam kanvas, misalnya jika saya menambahkan lukisan ke kanvas, dan sekarang saya ingin memindahkan lukisan itu sebesar 10px, kita tidak dapat memanipulasi lukisan itu secara langsung karena kita tidak dapat memperoleh lukisan itu sama sekali. .informasi apa pun. Yang bisa kita dapatkan hanyalah objek kanvas.
Jadi inilah pertanyaannya, bagaimana cara memutar gambar?Faktanya, kanvas menyediakan berbagai antarmuka untuk mengontrol kanvas. Ada metode rotasi () untuk rotasi.
Faktanya, rotasi di sini tidak benar-benar memutar kanvas. Misalnya, ctx.rotate(Math.PI/2) saya berputar 90°. Ini tidak berarti bahwa kita akan melihat kanvas diputar 90° pada halaman. Kita dapat memahami bahwa kanvas sebenarnya terdiri dari dua bagian, satu adalah kanvas yang terlihat dengan mata telanjang, dan yang lainnya adalah kanvas virtual yang digunakan untuk operasi. Semua tindakan kita di kanvas virtual akan dipetakan ke kanvas sebenarnya.
Mungkin sulit untuk memahami hal ini, jadi mari gunakan gambar untuk menjelaskannya. Pertama, mari kita perkenalkan metoderotate(). Metode ini dapat memutar kanvas dan memutar asal kanvas. Asal kanvas adalah sudut kiri atas secara default.
Mari kita lihat efek memutar 45°:
Di sini kita dapat melihat bahwa kanvas virtual yang saya sebutkan tadi diputar 45° dan kemudian sebuah gambar dimasukkan ke dalam kanvas virtual tersebut. Kemudian yang dihadirkan oleh kanvas nyata adalah perpotongan antara kanvas virtual dan kanvas nyata. Mungkin tidak mudah untuk memahaminya di sini, harap pikirkan baik-baik.
Kode kedua gambar tersebut adalah sebagai berikut:
// Tidak diputar var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.drawImage(img, 0, 0)// Rotasi berlawanan arah jarum jam 45° var img = dokumen.getElementById('img')var kanvas = dokumen.getElementById('kanvas')var ctx = kanvas.getContext(2d)ctx.rotate(-Math.PI / 4);ctx.drawImage(img, 0, 0)Melihat ini, saya rasa semua orang pada dasarnya tahu cara menggunakan memutar().
Mari kita bahas tentang cara memutar bagian tengah gambar
Izinkan saya berbicara tentang cara menggunakan dua metode kanvas lainnya:
ctx.translate(x, y): Metode ini adalah metode yang dapat memindahkan asal kanvas. Parameternya adalah x dan y;
ctx.drawImage(img, x, y): Metode ini telah digunakan di atas, tetapi memiliki tiga parameter. Yang pertama adalah dom gambar yang akan disisipkan, dan dua x dan y berikutnya adalah parameter untuk img ketika memasukkan gambar. Lokasi diubah.
Terlihat dari gambar, jika ingin memutar 45° pada bagian tengah gambar, Anda harus memindahkan asal kanvas ke tengah gambar, lalu memutar kanvas, lalu saat menyisipkan gambar, terjemahkan gambar ke pojok kiri atas setengah dari gambar itu sendiri.
Ada tiga langkah di sini:
Mari kita lihat ketiga langkah ini secara terpisah (lebar dan tinggi gambar adalah 400 dan 300)
Pindahkan asal kanvas
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.drawImage(img, 0, 0)Putar kanvas
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, 0, 0)Sisipkan gambar dan pindahkan
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, -200, -150)Itu saja, Anda sudah selesai
ps: Setelah menyelesaikan serangkaian tindakan, setiap orang harus memutar asal kanvas untuk memulihkannya. Jika tidak, setelah serangkaian operasi, pengaturan kanvas akan kacau. Cukup kembalikan pengaturan ke keadaan semula setelah setiap pengoperasian.
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150) // 1ctx.rotate(-Math.PI / 4) // 2ctx.drawImage(img, -200, -150)// Kembalikan pengaturan (langkah untuk memulihkan harus dibalik ke langkah yang Anda modifikasi) ctx.rotate(Math.PI / 4) // 1ctx.translate(-200, -150) // 2// Setelah itu, asal mula kanvas kembali ke Sudut kiri atas, sudut rotasi adalah 0//Operasi lainnya...Hal lain yang perlu diperhatikan adalah yang baru saya tunjukkan adalah contoh sumbu x dan sumbu y gambar relatif terhadap kanvas adalah 0. Jika bukan 0, pindahkan saja titik asal ctx.translate(200+x, 150 + tahun). Angka 200 dan 150 di sini adalah setengah lebar dan tinggi gambar, dan x dan y adalah x dan y gambar relatif terhadap kanvas.
Artikel ini hanya membahas tentang rotasi pada bagian tengah gambar. Nanti saya akan menulis tentang rotasi dan penskalaan gambar. Jika ada sesuatu yang ditulis dengan buruk atau salah, harap tunjukkan.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.