Komentar: Semua orang tahu bahwa tidak semua browser saat ini mendukung HTML5. Bahkan browser yang mendukung HTML5 mungkin tidak mendukung semua fitur baru HTML5. Dianjurkan agar Anda menggunakan firefox (favorit pengembang) atau browser chrome. Semua contoh saya dikembangkan berdasarkan Firefox.
Mulai hari ini, kita akan memulai serangkaian kursus di kanvas HTML5. Seri ini adalah ringkasan saya setelah membaca "HTML5 Canvas: Native Interactivity and Animation for the Web". Teman yang tertarik dapat mengunduh buku bahasa Inggris asli untuk dibaca. Buku ini menunjukkan kepada kita fungsi -fungsi yang kuat dari kanvas dengan memperkenalkan pengembangan kanvas. Saya pikir itu cukup bagus. Saya telah belajar banyak pengetahuan tentang kanvas dengan membaca buku ini. Bahkan, tidak banyak API di kanvas itu sendiri. Kuncinya adalah belajar dan menggunakannya secara aktif dan belajar untuk menciptakan hasil yang luar biasa untuk kombinasi API. Dan buku ini adalah pilihan terbaik Anda untuk belajar kanvas. Sangat disayangkan bahwa ia belum memiliki versi Cina. Teman dengan bahasa Inggris yang buruk hanya bisa menunggu.Seperti yang kita semua tahu, tidak semua browser saat ini mendukung HTML5, dan bahkan browser yang mendukung HTML5 mungkin tidak selalu mendukung semua fitur baru HTML5. Jadi setiap orang harus memilih browser yang relatif baru sebagai lingkungan debugging mereka. Dianjurkan agar Anda menggunakan firefox (favorit pengembang) atau browser chrome. Semua contoh saya dikembangkan berdasarkan Firefox.
Saya tidak akan memperkenalkan pengetahuan dasar yang terkait dengan HTML5 di sini. Ada banyak tutorial tentang HTML5 di internet, jadi saya bisa mempelajarinya sendiri. Untuk mempelajari HTML5, Anda harus memiliki fondasi yang lebih baik di JavaScript. Anda dapat pergi ke blog Paman Tom untuk belajar:. Faktanya, rangkaian kursus ini cukup sulit. Jika Anda mempelajari lebih dari 50 artikel dengan baik, Anda harus dianggap sebagai ahli JS.
Sekarang kami secara resmi memulai kursus kanvas kami, contoh pertama: halo kanvas.
Pertama, Anda perlu menambahkan tag kanvas di dalam tubuh, sebagai berikut:
<an kanvas>
Browser Anda tidak mendukung kanvas HTML5.
</ Canvas>
Bagian teks dalam kanvas akan ditampilkan ketika browser tidak mendukung objek Canvas.
Tag kanvas didefinisikan. Ketika kita perlu mengoperasikannya melalui JS, itu dapat diimplementasikan melalui GetElementById.
var thecanvas = document.getElementById (canvasone); Kami sekarang terbiasa menggunakan jQuery untuk mengembangkan tugas, jadi bagaimana cara mendapatkan objek Canvas menggunakan jQuery?
var canvas = $ ('#canvasone'). get (0); atau var canvas = $ ('#canvasone') [0]; Saya tidak tahu bahwa mendapatkan (0) dan [0] tidak memilikinya. Jika Anda tidak menggunakan metode get () atau subskrip [], kode JS Anda tidak akan dapat mengoperasikan kanvas secara normal. Karena $ ('#Canvasone') mendapatkan objek jQuery, dan apa yang sebenarnya ingin kami operasikan adalah objek DOM HTML. Ada masalah di mana objek jQuery dikonversi menjadi objek DOM, dan konversi ini diselesaikan melalui get () atau subskrip. Jika Anda perlu mengubah objek DOM menjadi objek jQuery, Anda dapat menggunakan metode $ () untuk mengimplementasikannya. Teman saya yang tidak jelas memiliki satu -satunya yang pergi ke Baidu sendirian, jadi saya tidak akan melakukannya secara mendalam di sini.
Untuk memastikan kekokohan kode, kami perlu menentukan apakah browser Anda mendukung objek kanvas, yang dapat diimplementasikan melalui kode berikut.
if (! thecanvas ||! thecanvas.getContext) {
kembali;
}
Namun, Anda disarankan untuk menggunakan perpustakaan modernizr.js untuk menyelesaikan pekerjaan ini. Ini adalah perpustakaan HTML5 JS yang sangat pasif dan menyediakan banyak metode yang berguna.
fungsi canvassupport () {
Return Modernizr.Canvas;
}
Canvas mendukung rendering 2D, dan diimplementasikan melalui kode berikut:
var context = thecanvas.getContext (2d);
Selanjutnya kita dapat menggambar gambar di atas kanvas melalui objek konteks.
// Atur warna area
context.fillstyle = "#FFFFFA";
// Gambarlah area tersebut
Context.Fillrect (0, 0, 500, 300);
// Atur font
context.font = "20px _sans";
// Atur penyelarasan vertikal
Context.TextBaseline = "Top";
// Gambar teks
Context.FillText ("Hello World!", 195, 80);
// Atur warna perbatasan
Context.strokestyle = "#000000";
// menggambar perbatasan
Context.Strokerect (5, 5, 490, 290);
Gambar gambar dijelaskan di bawah ini. Karena unduhan gambar yang asinkron, untuk memastikan bahwa ketika Anda menggambar dengan kanvas, gambar telah diunduh, kami menggunakan metode berikut:
var helloworldimage = gambar baru ();
helloWorldimage.src = "helloworld.gif";
helloWorldimage.onload = function () {
Context.drawimage (HelloWorldImage, 160, 130);
}
Ketika gambar selesai, acara Onload akan dipicu, dan gambar akan ditarik menggunakan objek konteks.
Semua orang mengunduh demo untuk melihat kode lengkap. Alamat unduhan demo: html5canvas.helloworld.zip