Bermula dengan Kanvas HTML5 (1) - Konsep Asas_html5 Kemahiran Tutorial

Apakah itu Kanvas

ialah elemen HTML baharu, yang ditakrifkan dalam HTML5. Elemen ini biasanya boleh digunakan untuk melukis grafik, mensintesis imej, dsb. dalam halaman HTML melalui JavaScript, dan juga boleh digunakan untuk melakukan beberapa animasi. Sudah tentu, spesifikasi HTML5 masih dalam peringkat draf, dan keluaran rasmi mungkin perlu menunggu sehingga 2010, tetapi banyak pelayar sudah menyokong sebahagian daripada spesifikasi HTML5. Penyemak imbas yang pada masa ini menyokong elemen kanvas termasuk Firefox 3, Safari 4, Chrome 2.0, dsb. Oleh itu, apabila menjalankan contoh pada halaman ini, sila pastikan anda menggunakan salah satu penyemak imbas di atas.

Walaupun terdapat banyak tutorial tentang Kanvas dalam Mozilla, saya memutuskan untuk merekodkan proses pembelajaran saya. Jika anda merasakan bahawa apa yang saya tulis tidak cukup jelas, anda boleh mencari pautan ke tutorial Kanvas di laman web Mozilla dalam rujukan.

Selain itu, beberapa contoh Kanvas yang menarik boleh didapati di sini.

Mulakan dengan Kanvas

Menggunakan Kanvas adalah sangat mudah, sama seperti menggunakan elemen HTML lain, anda hanya perlu menambahkan teg pada halaman:

Salin kod

Kod tersebut adalah seperti berikut:

Sudah tentu, ini hanya mencipta objek Kanvas dan tidak melakukan sebarang operasi padanya. Kanvas di sini masa Elemen kelihatan tidak berbeza daripada elemen div, tiada apa yang boleh dilihat pada halaman:)
Selain itu, saiz elemen kanvas boleh ditentukan melalui atribut lebar dan ketinggian, yang agak serupa dengan elemen img .
Inti Kanvas: Konteks
Seperti yang dinyatakan sebelum ini, objek Canvas boleh dikendalikan melalui JavaScript untuk melukis grafik, mensintesis imej, dsb. Operasi ini tidak dilakukan melalui objek Canvas itu sendiri, tetapi Ia dilakukan dengan mendapatkan konteks operasi Canvas melalui kaedah getContext objek Canvas. Dengan kata lain, apabila kita menggunakan objek Canvas nanti, kita akan berurusan dengan Konteks objek Canvas, dan objek Canvas itu sendiri boleh digunakan untuk mendapatkan maklumat seperti saiz objek Canvas.
Mendapatkan Konteks objek Canvas adalah sangat mudah. ​​Hanya panggil kaedah getContext elemen kanvas secara terus Apabila memanggil, anda perlu menghantar parameter jenis Konteks Satu-satunya nilai jenis yang tersedia dan tersedia pada masa ini:

<canvas id="screen" width="400" height="400"></canvas> <script type="text/javascript"> var canvas = document.getElementById("skrin"); var ctx = canvas.getContext("2d"); </skrip>

Petua: Anda boleh mengubah suai sebahagian daripada kod sebelum menjalankan

Firefox 3.0.x 的尴尬

Firefox 3.0.x 虽然支持了 canvas 元素，但是并没有完全按照规范来实现，规范中的 fillText、measureText 两个方法在 Firefox 3.0.x 中被几个 Firefox 特有的方法代替，因此在 Firefox 3.0.x 中使用 Canvas 时需要先 fix 这个几个方法在不同浏览器中的差别。

下面这代码取自 Mozilla Bespin 项目，它修正了 Firefox 3.0.x 中 Canvas 的 Context 对象与 HTML5 规范不一致的地方：

function fixContext(ctx) { // * upgrade Firefox 3.0.x text rendering to HTML 5 standard if (!ctx.fillText && ctx.mozDrawText) { ctx.fillText = function(textToDraw, x, y, maxWidth) { ctx.translate(x, y); ctx.mozTextStyle = ctx.font; ctx.mozDrawText(textToDraw); ctx.translate(-x, -y); }; } // * Setup measureText if (!ctx.measureText && ctx.mozMeasureText) { ctx.measureText = function(text) { if (ctx.font) ctx.mozTextStyle = ctx.font; var width = ctx.mozMeasureText(text); return { width: width }; }; } // * Setup html5MeasureText if (ctx.measureText && !ctx.html5MeasureText) { ctx.html5MeasureText = ctx.measureText; ctx.measureText = function(text) { var textMetrics = ctx.html5MeasureText(text); // fake it 'til you make it textMetrics.ascent = ctx.html5MeasureText("m").width; return textMetrics; }; } // * for other browsers, no-op away if (!ctx.fillText) { ctx.fillText = function() {}; } if (!ctx.measureText) { ctx.measureText = function() { return 10; }; } return ctx; }
提示：您可以先修改部分代码再运行

注意：到 Opera 9.5 为止，Opera 还不支持 HTML5 规范中 Canvas 对象的 fillText 以及其相关方法和属性。

Hello, Canvas!

在对 Canvas 进行了一些初步了解后，开始来写我们的第一个 Canvas 程序，闻名的 HelloWorld 的又一个分支“Hello, Canvas”：

<canvas id="screen" width="400" height="400"></canvas> <script type="text/javascript"> (function() { var canvas = document.getElementById("screen"); var ctx = fixContext(canvas.getContext("2d")); ctx.font = "20pt Arial"; ctx.fillText("Hello, Canvas!", 20, 20); ctx.fillText("www.xujiwei.com", 20, 50); function fixContext(ctx) { // * upgrade Firefox 3.0.x text rendering to HTML 5 standard if (!ctx.fillText && ctx.mozDrawText) { ctx.fillText = function(textToDraw, x, y, maxWidth) { ctx.translate(x, y); ctx.mozTextStyle = ctx.font; ctx.mozDrawText(textToDraw); ctx.translate(-x, -y); }; } // * Setup measureText if (!ctx.measureText && ctx.mozMeasureText) { ctx.measureText = function(text) { if (ctx.font) ctx.mozTextStyle = ctx.font; var width = ctx.mozMeasureText(text); return { width: width }; }; } // * Setup html5MeasureText if (ctx.measureText && !ctx.html5MeasureText) { ctx.html5MeasureText = ctx.measureText; ctx.measureText = function(text) { var textMetrics = ctx.html5MeasureText(text); // fake it 'til you make it textMetrics.ascent = ctx.html5MeasureText("m").width; return textMetrics; }; } // * for other browsers, no-op away if (!ctx.fillText) { ctx.fillText = function() {}; } if (!ctx.measureText) { ctx.measureText = function() { return 10; }; } return ctx; } })(); </script>
提示：您可以先修改部分代码再运行

Jalankan contoh dan kawasan di mana objek Kanvas berada memaparkan "Hello, World!" Ini betul-betul ctx.fillText("Hello, World!", 20, 20);

fillTeks dan atribut berkaitan

Kaedah

fillText digunakan untuk memaparkan teks dalam Kanvas Ia boleh menerima empat parameter, yang terakhir adalah pilihan:

void fillText(dalam teks DOMString, dalam float x, dalam float y, [Pilihan] dalam float maxWidth);

di mana maxWidth mewakili lebar maksimum apabila memaparkan teks, yang boleh menghalang teks daripada melimpah Walau bagaimanapun, dalam ujian saya, saya mendapati bahawa menyatakan maxWidth dalam Firefox dan Chomre tidak mempunyai kesan.

Sebelum menggunakan kaedah fillText, anda boleh melaraskan fon teks yang dipaparkan dengan menetapkan atribut fon Konteks Dalam contoh di atas, saya menggunakan "20pt Arial" sebagai fon teks yang dipaparkan nilai diri sendiri.

Tamat

Itu sahaja buat masa ini, saya akan menulis siri ini sambil membaca spesifikasi:)

Bahan rujukan

1. Kanvas HTML5, peringkat baharu untuk bahasa skrip, hred

2. Elemen Kanvas, WHATWG

3. Tutorial Kanvas Bahasa Cina, Mozilla

4. Tutorial Kanvas Bahasa Inggeris, Mozilla

5. sokongan kanvas dalam Opera, Opera