Penjelasan detail tentang perbedaan lebar, tinggi dan gaya pada kanvas H5

Baru-baru ini saya menemui masalah kecil saat mempelajari properti kanvas, yaitu lebar dan tinggi kanvas, akhirnya saya menyelesaikannya dengan mencari informasi yang relevan, jadi saya akan membagikan proses solusinya kepada Anda lihat detailnya. Mari kita perkenalkan

1. Saat menggunakan atribut lebar tinggi, tampilan tidak akan diregangkan secara normal sebagai berikut:

 <canvas id=mycanvas width=300 height=300>Browser tidak mendukung Canvas, harap tingkatkan atau gunakan browser lain! </canvas><script type=text/javascript> var canvas = document.getElementById(mycanvas), ctx = canvas.getContext('2d'); .stroke();</skrip>

Efek berjalannya adalah sebagai berikut, yaitu garis diagonal

2. Bila menggunakan gaya, gambar akan meregang (berubah bentuk).

 <gaya> #kanvas saya { lebar: 150 piksel; tinggi: 150 piksel;

Efek operasi

Kanvas adalah papan gambar dan selembar kertas gambar. Papan gambar itu disamakan dengan wadah gambar/pekerjaan yang dilakukan di atas kertas gambar.

Lebar dan tinggi default papan gambar dan kertas gambar adalah 300*150. Jika lebar dan tinggi kertas gambar dan papan gambar sama, gambar tidak akan diregangkan papan gambarnya berbeda, maka gambarnya akan melar (berubah bentuk).

1. Atribut lebar dan tinggi mengatur lebar dan tinggi papan gambar dan kertas gambar.

Misal: lebar=300 tinggi=300 berarti lebar dan tinggi papan gambar adalah 300*300, dan lebar serta tinggi kertas gambar juga 300*300. Gambar diagonal pekerjaan tersebut adalah 300*300 diregangkan.

2. Hanya lebar dan tinggi papan gambar yang diatur dalam gaya. Lebar dan tinggi kertas gambar masih nilai default 300*150.

(Ambil contoh gambar di atas) Oleh karena itu, gambar diagonal 300*300 yang sedang Anda kerjakan saja yang digambar pada kertas gambar, seperti berikut:

Btw, kertas gambarnya tidak akan membiarkan papan gambarnya kosong, jadi kertas gambar dan gambarnya harus diregangkan dengan ukuran yang sama dengan papan gambarnya. Pada contoh ini, lebar kertas gambar dan lebar artboard sama-sama 30, dan tingginya setengah dari artboard, jadi Anda hanya perlu meregangkan tingginya sebanyak dua kali, sehingga gambar juga terentang dan menipis, Arah X tetap tidak berubah, dan arah Y menjadi dua kali lipat, sehingga diperoleh gambar yang cacat.

Mengenai pengaturan lebar dan tinggi Canvas di HTML5

Elemen Canvas memiliki lebar 300px dan tinggi 150px secara default. Untuk mengatur lebar dan tinggi, Anda dapat menggunakan metode berikut (tidak akan diregangkan):

Metode satu:

<lebar kanvas=500 tinggi=500></kanvas>

Metode 2: Gunakan API Kanvas HTML5 untuk beroperasi dengan OK

var canvas = document.getElementById('id kanvas yang ingin Anda operasikan');

kanvas.lebar = 500;

kanvas.lebar = 500;

Jika lebar dan tinggi diatur dengan cara berikut, elemen Canvas akan diregangkan dari ukuran aslinya ke lebar dan tinggi yang ditentukan:

Metode 1: Menggunakan CSS akan meregangkan

#Untuk mengoperasikan id kanvas{

lebar:1000 piksel;

tinggi:1000 piksel;

｝

Metode 2: Operasi yang menggunakan API Kanvas HTML5 akan diperluas

var canvas = document.getElementById('id kanvas yang ingin Anda operasikan');

kanvas.gaya.lebar = 1000 piksel;

kanvas.gaya.tinggi = 1000 piksel;

Metode 3: Menggunakan $(#id).width(500); jquery akan diregangkan

Lainnya: Lebar dan tinggi kanvas tidak dapat dinyatakan dalam persentase. kanvas akan menampilkan persentase sebagai nilai numerik

Di atas adalah keseluruhan isi artikel ini, saya berharap isi artikel ini memiliki nilai referensi tertentu untuk belajar atau bekerja semua orang. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk komunikasi Jaringan.