Masalah yang dihadapi: html/11467.html">Alasan mengapa elemen kanvas berubah bentuk dan terdistorsi
Ada tiga ukuran untuk elemen DOM: ukuran gaya, ukuran html, dan ukuran css.
Saat menggunakan elemen kanvas, lebar dan tinggi default elemen kanvas adalah 300px * 150px. Ukuran default di sini adalah ukuran html.
Untuk lebih membantu pemahaman, ambillah lukisan sebagai contoh. Artboardnya berukuran css atau ukuran style, dan kanvasnya berukuran html.
Jika kita tidak menampilkan ukuran html dari elemen kanvas yang ditentukan, tetapi menentukan ukuran cssnya di file css. Hasilnya sangat membingungkan.
Misalnya kita menggambar lingkaran dengan radius 50px pada kanvas default 300px * 150px.
<html lang=zh><head> <meta charset=UTF-8> <title>ukuran kanvas</title> <style> #canvas { lebar: 200 piksel tinggi: 200 piksel; body><div> <kanvas id=canvas></canvas></div><script> window.onload = function () { const canvas = document.getElementById(kanvas); const ctx = kanvas.getContext(2d); ctx.beginPath(); ctx.strokeStyle = #aaaaaa; ctx.arc(100, 100, 50, 0, 2 * Matematika.PI); closePath(); };</script></body></html>Hasil akhir yang ditampilkan adalah sebagai berikut:
Terlihat ukuran kanvasnya memang 200 * 200. Namun lingkaran tersebut telah berubah menjadi elips, dan bentuknya telah berubah bentuk. Mengapa ini?
Apa yang terjadi jika ukuran yang disetel oleh css dihilangkan?
Terlihat grafiknya saat ini normal. Ukuran kanvasnya memang default 300*150.
Dari perbandingan dan imajinasi kita dapat mengambil kesimpulan sebagai berikut:
Awalnya kami menggambar lingkaran di kanvas 300150. Setelah gambar selesai, kita ingin mengubah ukuran kanvas menjadi 200200. Pada saat yang sama, kanvas tersebut masih kanvas yang sama dan tidak akan diubah.
Yang berhasil adalah meregangkan kanvas. Dengan asumsi kanvas mempunyai elastisitas, maka kanvas diregangkan dari 300150 sampai 200200. Sumbu semi mayor lingkaran pada kanvas menjadi 1,33 kali ukuran aslinya, dan sumbu semi minor menjadi 0,68 kali. Pada titik ini lingkaran secara alami berbentuk elips.
kesimpulannya:Saat menggunakan kanvas untuk menggambar, untuk menghindari masalah yang tidak perlu, Anda harus ingat untuk mengatur lebar dan tinggi ukuran HTML untuk elemen kanvas.
MeringkaskanDi atas adalah analisis singkat tentang pengaruh ukuran html dan ukuran css elemen kanvas pada elemen visual yang diperkenalkan oleh editor editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!
Jika menurut Anda artikel ini bermanfaat, silakan cetak ulang, harap sebutkan sumbernya, terima kasih!