HTML5 Canvas: Bagaimana untuk menguji sama ada penyemak imbas menyokong kemahiran tutorial Canvas

Artikel ini diterjemahkan daripada Steve Fulton & Jeff Fulton HTML5 Canvas, Bab 1, “Menguji untuk Melihat Sama ada Penyemak Imbas Menyokong Kanvas”.

Selepas mendapat rujukan kepada elemen Kanvas pada halaman HTML, kita perlu menguji sama ada elemen itu mengandungi "konteks". Konteks Kanvas merujuk kepada satah yang ditakrifkan oleh penyemak imbas untuk lukisan. Ringkasnya, jika konteksnya tidak wujud, Kanvas wujud dalam nama sahaja. Terdapat beberapa cara untuk menguji sama ada penyemak imbas menyokong Kanvas. Kaedah pertama adalah untuk menyemak sama ada kaedah getContext bagi elemen Kanvas dalam halaman HTML wujud:

Salin kod

Kodnya adalah seperti berikut:

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

Malah, perkara di atas kod menguji dua mata: satu , diuji sama ada theCanvas palsu (jika id tidak wujud, document.getElementById() akan mengembalikan false, kedua, diuji sama ada fungsi getContext() wujud;

Dalam kod di atas, jika ujian gagal, maka pernyataan pulangan dilaksanakan dan program ditamatkan.

Kaedah lain ialah mencipta fungsi yang digunakan khusus untuk menentukan sama ada Kanvas disokong, dan dalam fungsi ini, elemen Kanvas dijana dalam masa nyata untuk membuat penentuan ini - kaedah ini sangat popular, Mark Pilgrim dalam HTML5 Penyelesaian ini disebut di laman web http://diveintohtml5.org:

Salin kod

Kod tersebut adalah seperti berikut:

fungsi canvasSupport() {
return !!document.createElement('canvas').getContext;
}
function canvasApp() {
if (!canvasSupport(! )) {
return;
}
}

Kaedah kegemaran kami ialah menggunakan perpustakaan modernizr.js (ditemui di http://www.modernizr.com). Modernizr ialah perpustakaan JavaScript yang ringkas dan mudah digunakan untuk menguji keserasian pelbagai teknologi web - ia menyediakan banyak kaedah Boolean statik yang boleh digunakan untuk menguji sama ada Kanvas semasa disokong.

Memperkenalkan modernizr ke dalam halaman HTML adalah sangat mudah, muat turun kod dari http://www.modernizr.com, dan kemudian masukkan fail js luaran ini dalam halaman HTML:

Salin kod

Kod adalah seperti berikut:

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini