Catatan studi kanvas: Implementasi dasar-dasar kanvas 2D

Penulis：Eve Cole Waktu Pembaruan：2025-02-11 14:12:02

1. Apa itu Kanvas?

<canvas> adalah elemen HTML yang dapat digambar menggunakan skrip (biasanya js)

< kanvas > WebKit pertama kali diperkenalkan oleh Apple dan digunakan di Dashboard dan Safari Mac OS X

Saat ini, semua browser utama mendukungnya (IE9+, versi yang lebih rendah perlu memperkenalkan Explorer Canvas untuk mendukungnya)

1. Mulai menggambar (merender konteks)

Elemen <canvas> membuat kanvas berukuran tetap di mana konteks rendering CanvasRenderContext2D dapat digunakan untuk menggambar dan memproses konten yang akan ditampilkan.

Untuk menggambar di atas kanvas, Anda harus terlebih dahulu mendapatkan konteks rendering CanvasRenderContext2D2d. (Ini mengacu pada 2D, bukan berbicara tentang webgl)

 const kanvas = document.getElementById('mycanvas'); const ctx = kanvas.getContext('2d');ctx.fillStyle = 'pink';ctx.fillRect(10, 10, 300, 300);

Contoh

2. Properti CanvasRenderContext2D:

Anda dapat menentukan gaya gambar dengan mengatur properti konteksnya.

Semua properti adalah sebagai berikut:

milik	Perkenalan
kanvas	elemen kanvas
gaya isi	Warna, mode, atau gradien saat ini yang digunakan untuk mengisi jalur
font	Gaya font
globalAlpha	Menentukan opacity konten yang digambar di kanvas
Operasi Komposit global	Menentukan bagaimana suatu warna digabungkan dengan warna yang sudah ada di kanvas (compositing)
lineCap	Menentukan bagaimana ujung garis digambar
barisDashOffset	Setel offset tanda hubung
garisBergabung	Tentukan bagaimana dua garis dihubungkan
lebar garis	Menentukan lebar garis untuk operasi kuas (gambar garis).
batas mitra	Jika atribut lineJoin adalah mitra, atribut ini menentukan rasio maksimum panjang sambungan diagonal terhadap lebar garis.
bayanganBlur	Tingkat efek buram
bayanganWarna	warna bayangan
bayanganOffsetX	Jarak offset horizontal bayangan
bayanganOffsetY	Jarak offset vertikal bayangan
gaya stroke	Warna, mode, dan gradien untuk jalur kuas (gambar).
Perataan teks	perataan teks
teksBaseline	Perataan vertikal teks

3. Lebar dan tinggi kanvas

Lebar dan tinggi Kanvas perlu ditentukan menggunakan nilai atribut lebar dan tinggi.

Jika tidak ditentukan, ukuran default Kanvas adalah 300×150

Lebar dan tinggi yang ditentukan oleh gaya hanyalah ukuran tampilan elemen kanvas, bukan ukuran lingkungan gambar.

 kanvas {width: 1000px;height: 600px;<canvas id=mycanvas width=1000 height=600></canvas><canvas id=mycanvas1 width=500 height=300></canvas><canvas id=mycanvas2>< /kanvas>...ctx.fillStyle = merah;ctx.fillRect(10, 10, 100, 100);

Contoh lebar dan tinggi

Mengapa gaya diatur ke ukuran yang sama tetapi ditampilkan berbeda?

Kanvas itu sendiri memiliki dua set ukuran: satu adalah ukuran elemen itu sendiri, dan yang lainnya adalah ukuran permukaan gambar.
Jika diatur melalui atribut lebar dan tinggi, elemen itu sendiri dan ukuran permukaan gambar diubah pada saat yang bersamaan.
Jika ukuran elemen kanvas tidak sesuai dengan ukuran permukaan gambar, maka permukaan gambar akan diskalakan agar sesuai dengan ukuran elemen itu sendiri.
Tidak ada persyaratan khusus. Disarankan untuk menggunakan lebar dan tinggi kanvas secara langsung.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.