Berdasarkan Kanvas HTML5: Penjelasan terperinci tentang rentetan, laluan, latar belakang dan kemahiran tutorial pictures_html5

Kaedah untuk mencipta Kanvas adalah seperti berikut:

Salin kod

Kodnya adalah seperti berikut:

Boleh didapati di Tambah teks alternatif apabila teg tidak tersedia, seperti berikut:

Salin kod

Kod adalah seperti berikut:

Pelayar anda tidak sokong elemen kanvas.

Pada masa ini versi baharu pelbagai penyemak imbas telah mula menyokong HTML5 secara beransur-ansur, jadi sebelum anda mula menggunakannya, sila pastikan bahawa penyemak imbas anda ialah versi baharu Chrome, Firefox atau Penyemak Imbas di atas IE9. Teg

itu sendiri tidak mempunyai keupayaan untuk melukis gambar. Ia hanya menyediakan kawasan untuk JavaScript melukis imej, jadi kerja lukisan perlu diselesaikan dalam JavaScript. Berikut ialah kerja penyediaan yang diperlukan sebelum melukis:

Salin kod

Kod adalah seperti berikut:

var canvas = document.getElementById(“canvas”);
var context2D = canvas.getContext(“2d”);

Mula-mula anda perlu memasukkan objek kanvas ke dalam halaman web, dan kemudian gunakan Kaedah getContext() mendapatkan objek lukisan dua dimensi daripada kanvas. Parameter "2d" kaedah getContext() bermaksud dua dimensi (dikatakan bahawa ia akan dikembangkan kepada tiga dimensi pada masa hadapan, tetapi pada masa ini satu-satunya parameter yang tersedia ialah "2d").

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)

Salin kod

Kod adalah seperti berikut:

Pelayar anda tidak menyokong elemen kanvas!

Laluan

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:

Salin kod

Kod adalah seperti berikut:

Pelayar anda tidak menyokong elemen kanvas!

< ;/canvas>

Kod di atas diluluskan melalui ujian pelayar Google Chrome 14.0 dan Mozilla Firefox 7.0.