Atur beberapa fitur baru HTML5 dan sifat umum dari kanvas

Artikel ini terutama memperkenalkan beberapa fitur baru HTML5 dan penyortiran sifat -sifat umum kanvas. Canvas API adalah konten penting yang digunakan dalam HTML5 untuk menggambar grafik. Teman yang membutuhkannya dapat merujuk ke 1. Jenis konten HTML5 berikut

petunjuk

API Selectors tidak hanya nyaman. Ketika datang untuk melintasi DOM, API Selectors biasanya lebih cepat dari API pencarian simpul anak sebelumnya. Untuk menerapkan stylesheet cepat, browser sangat mengoptimalkan pencocokan pemilih.

Kanvas pada dasarnya adalah kanvas bitmap, di mana grafik yang ditarik di atasnya tidak dapat diukur dan tidak dapat diperbesar dan dikurangi seperti gambar SVG. Selain itu, objek yang digambar dengan kanvas bukan milik struktur dom halaman atau namespace apa pun.

Pemrograman dengan kanvas, Anda harus terlebih dahulu mendapatkan konteksnya. Kemudian jalankan tindakan dalam konteks dan akhirnya menerapkan tindakan ini ke konteks.

Koordinat dalam kanvas mulai dari sudut kiri atas, sumbu x memanjang ke kanan ke arah horizontal (dengan piksel) dan sumbu y memanjang ke bawah ke arah vertikal. Titik dengan koordinat sudut kiri atas x = 0 dan y-0 disebut asal.

Seperti kebanyakan elemen HTML, elemen kanvas juga dapat menambahkan batas dengan menerapkan CSS, mengatur margin dalam, margin luar, dll., Dan beberapa atribut CSS juga dapat diwarisi oleh elemen di kanvas.

Koreksi - Dalam sistem gambar, pernyataannya adalah transformasi - dapat diterapkan secara berurutan, digabungkan atau dimodifikasi sesuka hati saat diterapkan. Hasil dari setiap operasi gambar harus diperbaiki melalui lapisan koreksi sebelum ditampilkan di atas kanvas. Meskipun ini menambah kompleksitas tambahan, ini menambah fitur yang lebih kuat ke sistem gambar, yang dapat mendukung pemrosesan gambar real-time seperti alat pengeditan gambar arus utama saat ini, sehingga kompleksitas bagian konten dalam API ini diperlukan.

Ada saran penting tentang kode yang dapat digunakan kembali: Secara umum, gambar harus dimulai dari asal (0,0 poin dalam sistem koordinat), menerapkan transformasi (penskalaan, terjemahan, rotasi, dll.), Dan kemudian secara terus -menerus memodifikasi kode sampai efek yang diinginkan tercapai.

Fungsi jalur konteks

(1) moveto (x, y): tidak menggambar, cukup pindahkan posisi saat ini ke koordinat tujuan baru (x, y);

(2) Lineto (x, y): Tidak hanya menggerakkan posisi saat ini ke koordinat target baru (x, y), tetapi juga menarik garis lurus antara kedua koordinat.

(3) ClosePath (): Perilaku fungsi ini sangat mirip dengan Lineto. Satu -satunya perbedaan adalah bahwa Closepaht akan secara otomatis menggunakan koordinat awal jalur sebagai koordinat target. ClosePath juga menginformasikan kanvas bahwa angka yang saat ini ditarik telah ditutup atau telah membentuk area yang sepenuhnya tertutup, yang sangat berguna untuk pengisian dan pukulan di masa depan.

(4) Strokerect (): Gambar garis persegi panjang berdasarkan posisi dan koordinat yang diberikan.

(5) ClearRect (): Hapus semua konten di area persegi panjang dan kembalikan ke keadaan awalnya, yaitu warna transparan.

(6) QuadratCurveto (): Titik awal fungsi menggambar kurva adalah koordinat saat ini, dengan dua set tepi (x, y). Kelompok kedua mengacu pada titik akhir kurva. Grup pertama mewakili titik kontrol. Titik kontrol yang disebut terletak di sebelah kurva (tidak di atas kurva), dan efeknya setara dengan menciptakan gaya tegang pada kurva. Dengan menyesuaikan posisi titik kontrol, kelengkungan kurva dapat diubah.

Gambar meningkatkan kompleksitas operasi kanvas: Anda harus menunggu sampai gambar dimuat sepenuhnya sebelum dapat dioperasikan. Browser biasanya memuat gambar secara tidak sinkron saat skrip halaman dieksekusi. Jika tampilan membuat gambar ke kanvas sebelum dimuat sepenuhnya, kanvas tidak akan menampilkan gambar apa pun.

Gradien mengacu pada menggunakan algoritma pengambilan sampel bertahap pada set warna dan menerapkan hasilnya pada gaya stroke dan mengisi gaya.

Menggunakan gradien membutuhkan tiga langkah:

(1) membuat objek gradien;

(2) mengatur warna untuk objek gradien dan menunjukkan metode transisi;

(3) Tetapkan gradien untuk gaya pengisian atau gaya stroke pada konteksnya.

Untuk mengatur warna mana yang akan ditampilkan, gunakan fungsi AddColorstop pada objek gradien. Fungsi ini memungkinkan menentukan dua parameter: warna dan offset. Parameter warna adalah warna yang ingin digunakan pengembang saat mereka dibelai atau diisi pada posisi offset. Offset adalah nilai antara 0,0 dan 1.0, mewakili seberapa jauh jarak untuk berubah di sepanjang garis gradien.

Selain gradien linier, HTML5 Canvas API juga mendukung gradien radioaktif. Gradien radioaktif yang disebut berarti bahwa warna berubah dengan lancar di area kerucut antara dua lingkaran yang ditentukan. Titik terminasi warna yang digunakan untuk gradien radioaktif dan gradien linier adalah sama.