javascript - Bagaimana untuk mengubah imej pada kanvas?

Question

Contohnya, saya ada gambar seperti di bawah

<img src="image.jpg" width="1280px" height="600px" class="face-image" style="transform: translate(6px, 6px) scale(1.5) rotate(100deg);">

Lebar dan tinggi gambar ialah1280x600,并且transform属性是transform: translate(6px, 6px) scale(1.5) rotate(100deg);

Maaf, bagaimanakah parameter 1280x600的canvas画布，要怎样才能让图片按照transfrom yang saya cipta boleh diubah pada kanvas?

Saiz akhir kanvas tidak akan berubah.

Answer 1

Tiga apis ini tersedia pada objek ctx pada kanvas Anda boleh menyemaknya, tetapi anda harus memberi perhatian kepada satu perkaraTransformasi kanvas ialah transformasi asal, serupa dengan transformasi-asal:0,0 dalam css. atribut, tetapi atribut transformasi css Lalai ialah pusat tengahJadi ini melibatkan masalah yang agak klasik pada kanvas yang dipanggil bagaimanacara menggerakkan titik sauhRingkasnya, ia dilakukan dengan menggunakan nilai negatif transformasi kanvas. Saya tidak dapat menunjukkannya kepada anda apabila menaip pada telefon mudah alih.

Berikut ialah kaedah mudah untuk poster Poster juga menetapkan asal-transformasi imej kepada 0,0 Pada masa ini, parameter untuk mencapai kesan anda sebelum ini akan sama dengan nilai kanvas

Jika anda tidak memahami komputer tanpa bunyi di luar, saya boleh cuba membantu anda melaksanakannya apabila anda kembali ke belakang, namun, dari perspektif pertumbuhan, saya mengesyorkan anda menulis sendiri kod pelaksanaan mengikut pautan di atas

Answer 2

https://github.com/wanadev/pe...
demo http://www.html5.jp/test/pers...
Ini boleh membantu anda

Answer 3

Sudah jumpa jawapan untuk soalan ini, terima kasih @foreignerjack atas jawapannya
/q/10...