Komentar: HTML5 memperkenalkan label baru, dan area yang diwakili oleh label ini seperti kanvas. Semua gambar grafis Anda harus disajikan di kanvas ini di akhir. Dengan tag ini, ekspresi grafis browser telah sangat ditingkatkan. Apakah Flash dan Silverlight merasa terancam?
1. Tag <an kanvas>HTML5 memperkenalkan tag <nyvas> baru, area yang diwakili oleh tag ini seperti kanvas, dan semua gambar grafis Anda harus disajikan pada kanvas ini di akhir. Dengan tag ini, ekspresi grafis browser telah sangat ditingkatkan. Apakah Flash dan Silverlight merasa terancam?
Tautan Berita: Google mengklaim browser Chrome 7 akan mempercepat 60 kali lebih cepat
Penggunaan tag <an Canvas> sangat sederhana, sebagai berikut:
<an kanvas>
Browser Anda tidak mendukung tag Canvas
</ Canvas>
Tidak ada perbedaan besar antara tag <anvas> dan tag HTML biasa. Anda dapat mengatur lebar dan tinggi, dan Anda dapat mengatur warna latar belakangnya, gaya perbatasan, dll. Melalui CSS.
Anda dapat menemukan lebih banyak tentang tag <an Canvas> di sini.
Konten di tengah tag adalah konten pengganti. Jika browser pengguna tidak mendukung tag <an Canvas>, konten akan ditampilkan; Jika browser pengguna mendukung tag <an Canvas>, konten akan diabaikan.
Kode <an Canvas> di atas menampilkan efek berikut:
Browser Anda tidak mendukung tag Canvas
Jika Anda menggunakan IE browser, Anda hanya dapat melihat prompt; Jika Anda menggunakan browser Google Chrome atau Firefox, Anda dapat melihat area kotak merah.
2. Konteks Rendering
Faktanya, kami tidak dapat melakukan apa pun dengan tag <an Canvas>. Siswa yang telah memainkan pemrograman Windows tahu bahwa dalam menggambar di Windows, Anda harus terlebih dahulu mendapatkan konteks perangkat DC, dan ketika menggambar pada tag <an Canvas>, Anda juga perlu mendapatkan konteks rendering. Grafik kami tidak ditarik langsung di layar, tetapi pada konteks (konteks) terlebih dahulu, dan kemudian menyegarkan pada layar.
Off Topic: Mengapa Anda perlu menyusun konsep dengan konteks yang begitu kompleks? Karena objek konteksnya, kita dapat membuat berbagai perangkat grafis terlihat sama di mata kita. Kita hanya perlu fokus pada menggambar, dan membiarkan sistem operasi dan browser khawatir tentang tugas -tugas lain. Terus terang, ubah semua jenis beton menjadi abstraksi terpadu, sehingga mengurangi beban kita.
Mendapatkan konteksnya sangat sederhana, Anda hanya perlu dua baris kode sebagai berikut:
var canvas = document.getElementById ('tutorial');
var ctx = canvas.getContext ('2d');
Pertama, dapatkan objek Canvas, lalu panggil metode GetContext dari objek Canvas. Metode ini hanya dapat melewati parameter 2D saat ini. Dalam waktu dekat, dapat mendukung parameter 3D. Anda harus memahami apa artinya itu, mari kita nantikannya.
Metode GetContext mengembalikan objek CanvasrendingContext2D, yaitu, objek konteks rendering. Anda dapat menemukan lebih banyak tentang itu di sini, yang semuanya adalah beberapa metode menggambar.
3. Dukungan browser
Selain menampilkan konten alternatif pada browser yang tidak didukung, kami juga dapat memeriksa apakah browser mendukung kanvas melalui skrip. Metode ini sangat sederhana. Nilai saja apakah ada fungsi GetContext. Kodenya adalah sebagai berikut:
var canvas = document.getElementById ('tutorial');
if (canvas.getContext) {
alert ("Dukungan <Selvas> tag");
} kalau tidak {
alert ("Tag <nan Canvas> yang tidak didukung");
}
4. Contoh kecil
Di bawah ini, contoh garis bergerak ke atas dan ke bawah akan ditunjukkan menggunakan fungsi menggambar HTML5. Kode spesifik akan diberikan dalam konten selanjutnya.
Browser Anda tidak mendukung tag <anvas>, silakan gunakan browser Chrome atau Firefox