Rumah > Artikel > hujung hadapan web > Berdasarkan Kanvas HTML5: Penjelasan terperinci tentang rentetan, laluan, latar belakang dan kemahiran tutorial pictures_html5
Kaedah untuk mencipta Kanvas adalah seperti berikut:
Objek Konteks yang diperolehi ialah objek terbina dalam HTML5, yang mengandungi banyak lukisan grafik dan kaedah pelarasan Dengan mengendalikannya dalam JavaScript, anda boleh melukis grafik yang diperlukan dalam kanvas Kanvas.
String
Gunakan kaedah fillText() objek Konteks untuk melukis rentetan dalam kanvas. Prototaip kaedah fillText() adalah seperti berikut:
void fillText(teks, kiri, atas, [MaxWidth]);
Maksud empat parameternya ialah: rentetan yang akan dilukis, absis dan ordinat sudut kiri atas dalam kanvas apabila dilukis ke dalam kanvas, dan panjang maksimum rentetan yang dilukis. Panjang maksimum maxWidth ialah parameter pilihan.
Selain itu, anda boleh melaraskan fon dan saiz rentetan dengan menukar atribut fon objek Konteks Lalai ialah "10px sans-serif".
Contoh berikut memaparkan rentetan "Hello Kanvas!" dalam kanvas (sudut kiri atas rentetan berada di tengah kanvas)
Grafik asas HTML5 Canvas adalah berdasarkan laluan. Biasanya moveTo(), lineTo(), rect(), arc() dan kaedah lain bagi objek Konteks digunakan untuk mengesan titik laluan grafik pada kanvas dahulu, dan kemudian kaedah fill() atau stroke() digunakan untuk mengisi grafik atau melukis mengikut garisan laluan.
Biasanya, anda perlu memanggil kaedah beginPath() bagi objek Konteks sebelum mula melukis laluan Fungsinya adalah untuk mengosongkan laluan sebelumnya dan mengingatkan Konteks untuk mula melukis laluan baharu (. ) kaedah dipanggil, semua laluan sebelumnya akan dilukis Laluan mempengaruhi kesan lukisan, dan juga mempengaruhi prestasi halaman web disebabkan oleh operasi berulang. Di samping itu, memanggil kaedah closePath() objek Konteks boleh menutup laluan semasa secara eksplisit, tetapi laluan itu tidak akan dikosongkan.
Berikut ialah prototaip untuk beberapa kaedah melukis laluan:
kosongkan moveTo(x, y);
digunakan untuk menyatakan secara eksplisit titik permulaan laluan. Secara lalai, titik permulaan laluan pertama ialah titik (0, 0) kanvas, dan titik permulaan seterusnya ialah titik akhir laluan sebelumnya. Kedua-dua parameter dibahagikan kepada nilai koordinat x dan y yang mewakili titik permulaan.
kosongkan lineTo(x, y);
digunakan untuk melukis laluan lurus dari titik permulaan ke kedudukan yang ditentukan Selepas lukisan selesai, titik permulaan yang dilukis akan bergerak ke kedudukan yang ditentukan. Parameter mewakili nilai koordinat x dan y lokasi yang ditentukan.
void rect(kiri, atas, lebar, tinggi);
digunakan untuk melukis segi empat tepat dengan kedudukan bucu kiri atas yang diketahui, lebar dan tinggi Selepas lukisan selesai, titik permulaan lukisan Konteks akan bergerak ke bucu kiri atas segi empat tepat. Parameter mewakili koordinat x dan y sudut kiri atas segi empat tepat dan lebar dan tinggi segi empat tepat.
void arcTo(x1, y1, x2, y2,radius);
digunakan untuk melukis lengkok yang bertangen kepada dua segmen garisan Kedua-dua segmen garisan mengambil titik permulaan lukisan Konteks semasa dan titik (x2, y2) sebagai titik permulaan, dan kedua-duanya berakhir pada (x1, y1. ) titik Lengkok itu Jejari ialah jejari. Selepas lukisan selesai, titik permulaan lukisan akan bergerak ke titik tangen antara ruas garisan dan lengkok bermula dari (x2, y2).
lengkok kosong(x, y, jejari,Sudut mula, Sudut hujung, lawan jam);
digunakan untuk melukis lengkok dengan titik (x, y) sebagai pusat, jejari sebagai jejari, Sudut mula sebagai radian permulaan dan Sudut hujung sebagai radian penamat. lawan jam ialah parameter Boolean, benar bermaksud lawan jam, palsu bermaksud mengikut arah jam. Dua radian dalam parameter diwakili oleh 0°, dan kedudukannya pada pukul 3; nilai Math.PI mewakili 180°, dan kedudukannya pada pukul 9.
kosongkan quadraticCurveTo(cpx,cpy, x, y);
digunakan untuk melukis laluan spline kuadratik dengan titik permulaan lukisan Konteks semasa sebagai titik permulaan, titik (cpx, cpy) sebagai titik kawalan dan titik (x, y) sebagai titik akhir.
batal bezierCurveTo(cpx1,cpy1, cpx2, cpy2, x, y);
digunakan untuk melukis laluan lengkung Bezier dengan titik permulaan lukisan Konteks semasa sebagai titik permulaan, (cpx1, cpy1) titik dan (cpx2, cpy2) sebagai dua titik kawalan dan (x, y) titik sebagai titik akhir.
Selepas lukisan laluan selesai, anda perlu memanggil kaedah fill() dan stroke() bagi objek Konteks untuk mengisi laluan dan melukis garis laluan, atau panggil kaedah clip() untuk mengetatkan kawasan Kanvas. Prototaip tiga kaedah di atas adalah seperti berikut:
strok batal();
Digunakan untuk melukis garisan mengikut laluan sedia ada.
kosong isi();
Digunakan untuk mengisi kawasan laluan menggunakan gaya isian semasa.
klip kosong();
Digunakan untuk menetapkan kawasan keratan dalam kanvas mengikut laluan sedia ada. Selepas memanggil kaedah clip(), kod lukisan grafik hanya berkesan di kawasan keratan dan tidak lagi menjejaskan kanvas di luar kawasan itu. Jika laluan tidak dilukis sebelum panggilan (iaitu, dalam keadaan lalai), kawasan keratan yang terhasil ialah keseluruhan kawasan Kanvas.
Selain itu, objek Konteks juga menyediakan sifat yang sepadan untuk melaraskan gaya garisan dan isian, seperti yang ditunjukkan di bawah:
Gaya stroke
Warna garisan, lalai ialah "#000000", nilainya boleh ditetapkan kepada nilai warna CSS, objek kecerunan atau objek corak.
fillStyle
Warna isian lalai kepada "#000000". Seperti strokeStyle, nilai juga boleh ditetapkan kepada nilai warna CSS, objek kecerunan atau objek corak.
lineWidth
Lebar garisan, unit ialah piksel (px), lalai ialah 1.0.
lineCap
Gaya titik akhir garisan, terdapat tiga jenis untuk dipilih: punggung (tiada), bulat (kepala bulat) dan segi empat sama (kepala segi empat sama).
lineJoin
Terdapat tiga gaya titik pusingan garisan: bulat (bucu bulat), serong (bucu rata), dan miter (bucu tajam) tersedia untuk pemilihan dan lalai ialah miter.
miterLimit
Atur cara tajam untuk melipat sudut tajam garisan, lalainya ialah 10.
Contoh berikut memanggil beberapa kaedah dan sifat di atas untuk melukis grafik: