Komentar: Apa itu Canvas <Canvas> adalah elemen HTML baru yang didefinisikan dalam HTML5. Elemen ini biasanya dapat digunakan untuk menggambar grafik, mensintesis gambar, dll. Di halaman HTML melalui JavaScript, dan juga dapat digunakan untuk membuat beberapa animasi. Tentu saja, saat ini html5
Apa itu kanvas
<Canvas> adalah elemen HTML baru yang didefinisikan dalam HTML5. Elemen ini biasanya dapat digunakan untuk menggambar grafik, mensintesis gambar, dll. Di halaman HTML melalui JavaScript, dan juga dapat digunakan untuk membuat beberapa animasi. Tentu saja, spesifikasi HTML5 masih dalam tahap rancangan, dan mungkin perlu waktu hingga 2010 untuk secara resmi dirilis, tetapi sekarang banyak browser telah mendukung beberapa spesifikasi HTML5. Saat ini, browser yang mendukung elemen kanvas termasuk Firefox3+, Safari4, Chrome 2.0+, dll., Jadi saat menjalankan contoh di halaman ini, pastikan Anda menggunakan salah satu browser di atas.
Meskipun saya memiliki banyak tutorial di kanvas di Mozilla, saya memutuskan untuk merekam proses pembelajaran saya. Jika Anda pikir saya tidak cukup mengerti, Anda dapat menemukan tautan ke tutorial Canvas di situs web Mozilla di materi referensi.
Juga, beberapa contoh kanvas yang menarik dapat ditemukan di sini.
Mulailah dengan kanvas
Menggunakan kanvas sederhana. Sama seperti menggunakan elemen HTML lainnya, Anda hanya perlu menambahkan tag <Canvas> ke halaman:
<Canvas> </an Canvas>
Tentu saja, ini hanyalah kreasi sederhana dari objek kanvas dan tidak melakukan operasi apa pun di atasnya. Pada saat ini, elemen kanvas terlihat tidak berbeda dari elemen div, dan tidak ada yang bisa dilihat di halaman :)
Selain itu, ukuran elemen kanvas dapat ditentukan oleh atribut lebar dan tinggi, yang agak mirip dengan elemen IMG.
Inti Kanvas: Konteks
Seperti yang disebutkan sebelumnya, Anda dapat mengoperasikan objek Canvas melalui JavaScript untuk menggambar grafik, gambar sintesis, dll. Operasi ini tidak dilakukan melalui objek Canvas itu sendiri, tetapi dilakukan melalui metode objek Canvas untuk mendapatkan konteks untuk mendapatkan konteks operasi Canvas. Dengan kata lain, dalam proses menggunakan objek Canvas, kami berurusan dengan konteks objek Canvas, dan objek Canvas itu sendiri dapat digunakan untuk mendapatkan informasi seperti ukuran objek Canvas.
Sangat mudah untuk mendapatkan konteks objek Canvas. Panggil saja metode getContext dari elemen kanvas. Saat menelepon, Anda perlu melewati parameter tipe konteks. Satu -satunya nilai tipe yang dapat digunakan dan dapat digunakan adalah 2D:
Fasa malu Firefox3.0.x
Meskipun firefox3.0.x mendukung elemen kanvas, itu tidak sepenuhnya diimplementasikan sesuai dengan spesifikasi. Metode Filltext dan MeasureText dalam spesifikasi digantikan oleh beberapa metode spesifik firefox di firefox3.0.x. Oleh karena itu, saat menggunakan kanvas di firefox3.0.x, Anda harus terlebih dahulu memperbaiki perbedaan antara metode ini di browser yang berbeda.
Kode berikut diambil dari proyek Mozillabespin, yang memperbaiki ketidakkonsistenan antara objek konteks kanvas di firefox3.0.x dan spesifikasi HTML5:
Catatan: Sampai Opera 9.5, Opera tidak mendukung Filltext dari objek Canvas dan metode dan sifat terkait dalam spesifikasi HTML5.
Halo, kanvas!
Setelah beberapa pemahaman awal tentang kanvas, kami mulai menulis program kanvas pertama kami, cabang lain dari HelloWorld Hello yang terkenal, Canvas:
Jalankan contohnya, area di mana objek Canvas terletak menunjukkan halo, dunia!, Yang merupakan fungsi dari ctx.filltext (halo, dunia!, 20,20); dalam kode.
FillText dan properti terkait
Metode FillText digunakan untuk menampilkan teks di kanvas. Itu dapat menerima empat parameter, yang terakhir adalah opsional:
voidFillText (indomStringText, iriatx, empur, [opsional] iriatmaxwidth);
Di mana Maxwidth mewakili lebar maksimum saat menampilkan teks, yang dapat mencegah teks meluap. Namun, dalam pengujian saya, saya menemukan bahwa Maxwidth tidak efektif ketika menentukan Maxwidth di Firefox dan Chomre.
Sebelum menggunakan metode FillText, Anda dapat menyesuaikan font teks dengan mengatur properti font dari konteks. Dalam contoh di atas, saya menggunakan 20ptarial sebagai font teks. Anda dapat menetapkan nilai yang berbeda sendiri untuk melihat efek spesifik.
Menyelesaikan
Itu saja untuk saat ini. Saya akan menulis seri ini saat membaca spesifikasinya :)
Referensi
1. HTML5 Canvas, tahap baru untuk bahasa skrip, hred
2.
3. Canvastutorial China, Mozilla
4. Bahasa Inggris Canvastutorial, Mozilla
5. CanVassupportinopera, Opera