html5 canvas-1.canvas pengenalan (hello canvas)_html5 kemahiran tutorial

Mulai hari ini, kami akan memulakan satu siri kursus tentang kanvas html5. Siri ini adalah ringkasan saya selepas membaca "HTML5 Canvas: Native Interactivity and Animation for the Web". Rakan-rakan yang berminat boleh memuat turun buku asal Bahasa Inggeris dan membacanya. Buku ini menunjukkan kepada kita fungsi kanvas yang berkuasa dengan memperkenalkan kaedah pembangunan permainan kanvas. Saya rasa ianya agak bagus. Saya belajar banyak tentang kanvas dengan membaca buku ini. Sebenarnya, kanvas itu sendiri tidak mempunyai banyak API Perkara utama ialah mempelajari dan menggunakannya secara fleksibel, dan belajar menggunakan gabungan API untuk mencipta kesan yang luar biasa. Buku ini adalah pilihan terbaik anda untuk belajar kanvas Malangnya, ia masih belum mempunyai versi bahasa Cina.

Seperti yang kita sedia maklum, tidak semua penyemak imbas pada masa ini menyokong html5 Malah penyemak imbas yang menyokong html5 mungkin tidak menyokong semua ciri baharu html5. Oleh itu, anda harus memilih penyemak imbas yang agak baharu sebagai persekitaran penyahpepijatan anda Adalah disyorkan agar anda menggunakan Firefox (kegemaran pembangun) atau pelayar Chrome Semua contoh saya dibangunkan berdasarkan Firefox.

Pengetahuan asas berkaitan html5 tidak akan diperkenalkan di sini Terdapat banyak tutorial tentang html5 di Internet, jadi pelajari sendiri. Mempelajari HTML5 memerlukan semua orang mempunyai asas yang baik dalam JavaScript Anda boleh pergi ke blog Uncle Tom untuk belajar: http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html. Sebenarnya, siri kursusnya agak sukar Jika anda mempelajari semua 50 atau lebih bab, anda harus dianggap sebagai pakar js.
Kini kami memulakan kursus kanvas kami secara rasmi, contoh pertama: "hello kanvas".
Mula-mula anda perlu menambah tag kanvas dalam badan, seperti berikut:

Salin kod

Kod Seperti berikut:

Pelayar anda tidak menyokong HTML5 Canvas

Bahagian teks dalam kanvas akan dipaparkan apabila penyemak imbas tidak menyokong objek kanvas.
mentakrifkan teg kanvas Apabila kita perlu mengendalikannya melalui js, kita boleh melakukannya melalui getElementById.
var theCanvas = document.getElementById("canvasOne"); Kami kini terbiasa menggunakan jquery untuk membangunkan tugasan, jadi bagaimana untuk mendapatkan objek kanvas menggunakan jquery?
var canvas = $('#canvasOne').get(0); atau var canvas = $('#canvasOne')[0]; 0] tidak ada di sana. Jika anda tidak menggunakan kaedah get() atau subskrip [], kod js anda tidak akan dapat mengendalikan kanvas secara normal. Kerana $('#canvasOne') memperoleh objek jquery, dan apa yang sebenarnya kita mahu kendalikan ialah objek html dom. Terdapat masalah untuk menukar objek jquery kepada objek dom Penukaran ini diselesaikan melalui get() atau melanggan. Jika anda perlu menukar objek dom kepada objek jquery, anda boleh menggunakan kaedah $(). Mereka yang tidak tahu hanya boleh pergi ke Baidu sendiri, jadi saya tidak akan menerangkan butiran di sini.
Untuk keteguhan kod, kami perlu menentukan sama ada penyemak imbas anda menyokong objek kanvas, yang boleh dicapai melalui kod berikut.

Salin kodKod tersebut adalah seperti berikut:

jika (!theCanvas || !theCanvas. getContext) {
kembali;
}

Walau bagaimanapun, anda disyorkan untuk menggunakan perpustakaan modernizr.js untuk menyelesaikan kerja ini yang menyediakan banyak kaedah yang berguna. function canvasSupport () {
kembali Modernizr.canvas;
}

kanvas menyokong pemaparan 2d, yang dicapai melalui kod berikut: konteks var = theCanvas.getContext("2d"); Sekarang kita boleh melukis imej pada kanvas melalui objek konteks.

Salin kod

Kod adalah seperti berikut:
//Tetapkan warna kawasan
context .fillStyle = "#ffffaa";
//Lukisan kawasan
context.fillRect(0, 0, 500, 300); 20px _sans";

//Tetapkan penjajaran menegak

context.textBaseline = "top"; //Draw textcontext.fillText ("Hello World!", 195, 80); // Tetapkan warna jidarcontext.strokeStyle = "#000000";
Berikut memperkenalkan cara melukis gambar. Disebabkan oleh muat turun tidak segerak imej, untuk memastikan bahawa apabila anda menggunakan kanvas untuk melukis imej, imej telah dimuat turun, kami menggunakan kaedah berikut:

Salin kod

Kodnya adalah seperti berikut:

var helloWorldImage = new Image(); 🎜>helloWorldImage.onload = function ( ) {
context.drawImage(helloWorldImage, 160, 130); dan objek konteks akan digunakan untuk melukis gambar.
Muat turun demo untuk melihat kod lengkap, alamat muat turun demo:
html5canvas.helloworld.zip