Teg Kanvas HTML5 menggunakan kemahiran tutorial collection_html5

1. Konsep asas

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, anda boleh temui beberapa contoh Kanvas yang menarik di sini

Mulakan dengan Kanvas

Menggunakan Kanvas adalah sangat mudah Sama seperti menggunakan elemen HTML yang lain, anda hanya perlu menambahkan teg

Kod adalah seperti berikut:

Sudah tentu, ini hanya mencipta objek Canvas dan tidak melakukan apa-apa operasi padanya Pada masa ini, elemen kanvas kelihatan tidak berbeza daripada elemen div Tiada apa-apa pada halaman Tidak dapat memberitahu :)
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:

Walaupun Firefox 3.0.x menyokong elemen kanvas, ia tidak dilaksanakan dengan mematuhi spesifikasi sepenuhnya Kaedah fillText dan measureText dalam spesifikasi digantikan dengan beberapa kaedah khusus Firefox dalam Firefox 3.0.x 3.0 Apabila menggunakan Canvas dalam .x, anda perlu terlebih dahulu membetulkan perbezaan antara kaedah ini dalam penyemak imbas yang berbeza.

Kod berikut diambil daripada projek

Mozilla Bespin

, yang membetulkan ketidakkonsistenan antara objek Konteks Kanvas dalam Firefox 3.0.x dan spesifikasi HTML5:

function fixContext(ctx) { // * tingkatkan pemaparan teks Firefox 3.0.x kepada HTML 5 standard

jika (!ctx.fillText && ctx.mozDrawText) {

ctx.fillText = function( textToDraw, x, y, maxWidth) {
ctx.translate(x, y)
ctx.mozTextStyle = ctx.font; x, -y);
};
}
// * Sediakan measureText
jika (!ctx.measureText && ctx.mozMeasureText) {
ctx.measureText = function(text) {
jika (ctx.font) ctx.mozTextStyle = ctx.font; 🎜>// * Sediakan html5MeasureText
if (ctx.measureText && !ctx.html5MeasureText) {
ctx.html5MeasureText = ctx.measureText
ctx.measureText) { var = fungsi
ctx.measureText> {🎜; = ctx.html5MeasureText(text);
// palsukan sehingga anda berjaya
textMetrics.ascent = ctx.html5MeasureText("m").width; 🎜>}
// * untuk penyemak imbas lain, tiada operasi
jika (!ctx.fillText) {
ctx.fillText = function() {}; !ctx.measureText) {
ctx.measureText = function() { return 10; };

Nota: Mulai Opera 9.5, Opera tidak menyokong fillText dan kaedah serta sifat berkaitan objek Canvas dalam spesifikasi HTML5.



Helo, Kanvas!


Selepas beberapa pemahaman awal tentang Kanvas, kami mula menulis program Kanvas pertama kami, satu lagi cabang HelloWorld "Hello, Canvas" yang terkenal:

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

其中 maxWidth 表示显示文字时最大的宽度，可以防止文字溢出，不过我在测圀大的宽度，可以防止文字溢出，不过我在测大宽度，可以防止文字溢出，不过我在测圀寕与在测國寕何中指定了 maxWidth 时也没有任何效果。

在使用 fillText 方法之前，可以通过设置 Konteks 的 font 属性来调整显示文字的字体，不体，不体，中体用了“20pt Arial”来作为显示文字的字体，你可以自己设置不同的值来看具体的效果。

二、路径

图形的基础 - 路径

在 kanvas 中, 所有基本图形都是以路径为基础的, 也就是说, 我们在调用 2dcontext 的 lineto 、 rect 等方法时, 其实就是往已经的 konteks 路径集合中再添加一些路径点, 在最后使用 isi 或 lejang 方法进行绘制时，都是依据这些路径点来进行填充或>。

在每次开始绘制路径前，都应该使用 context.beginPath() 方法来告诉 Konteks 对象开始中的对象开始一家则接下来绘制的路径会与之前绘制的路径叠加，在填充或画边框时就会出现问题。在绘制完成路径后，可以直接使用 context.closePath() 方法来关闭，方法来关闭路得路得径。另外，如果在填充时路径没有关闭，那么 Konteks 会自动调用 closePath 方法将路闭关。

基本路径方法

1. beginPath, closePath

这两个方法在前面已经介绍过，分别用来通知 Konteks 开始一个新的路径和德的路径和彳关。

在 Kanvas 中使用路径时，应该要保持一个良好的习惯，每次开始绘制路径径制路径創路径副好的习惯，每次开始绘制路径副路径副路径副路径副路径副路径副路径副路径剬路方法，否则画出来的效果难看不说，还会严重影响性能。

在下面这张图中，左边的图形在每次绘制矩形前都调用了一次 beginPath 来湷年院开始绘制新的路径，而后面的图形则就只在绘制所有图形前调用了一次beginPath 来清除路径，因此，虽然这里是使用的边框色是 #666，但是右边的图形颜色是使用的边框色是 #666，但是右边的图形颜色澹曾形颜色比更为了次使用 strok 绘制边框时，会把之前的路径再次绘制一遍，叠加起来颜色就比原来深一些。

2. Pergerakan dan garis lurus bergerakKe, garisKe, betul

ctx.stroke();

void moveTo(dalam float x, dalam float y);

Apabila melukis laluan dalam Kanvas, secara amnya tidak perlu menentukan titik permulaan Titik permulaan lalai ialah titik akhir laluan yang dilukis yang terakhir, oleh itu, jika anda perlu menentukan titik permulaan, anda perlu menggunakan kaedah moveTo untuk menentukan kedudukan untuk dipindahkan.


kosong lineTo(dalam apungan x, dalam apungan y);

Kaedah
lineTo melukis laluan terus ke lokasi yang ditentukan. Selepas memanggil kaedah lineTo, titik permulaan lukisan di dalam Konteks akan bergerak ke titik akhir garis lurus.


void rect(dalam float x, dalam float y, dalam float w, dalam float h);

Kaedah tegak digunakan untuk melukis laluan segi empat tepat, menyatakan kedudukan sudut kiri atas, lebar dan tinggi melalui parameter. Selepas memanggil rect , titik permulaan lukisan Konteks akan bergerak ke sudut kiri atas segi empat tepat yang dilukis dengan rect .

Kaedah

tepat sedikit berbeza daripada kaedah lengkok yang akan diperkenalkan kemudian dan kaedah laluan lain Mereka menggunakan parameter untuk menentukan titik permulaan, dan bukannya menggunakan titik permulaan yang dikekalkan secara dalaman oleh Konteks.
3. Lengkok LengkokKe, lengkok, kuadratikCurveTo, bezierCurveTo

void arcTo(dalam apungan x1, dalam apungan y1, dalam apungan x2, dalam apungan y2, dalam jejari apungan);

Mengikut arahan dokumen WHATWG, kaedah ini adalah untuk melukis tangen lengkok kepada dua sinar Satu daripada dua sinar melalui Konteks untuk melukis titik permulaan dan titik akhir ialah (x1, y1), dan. yang satu lagi melalui (x2, y2), titik akhir ialah (x1, y1), lengkok ini ialah lengkok tangen terkecil kepada dua sinar ini. Selepas memanggil kaedah arcTo, tambahkan titik tangen antara lengkok dan sinar (x1, y1)-(x2, y2) ke laluan semasa sebagai titik permulaan untuk lukisan seterusnya.

Dalam ujian, didapati bahawa Firefox dan Opera pada masa ini tidak menyokong kaedah ini dengan baik, dan hanya Chrome dan Safari 4 boleh melukis laluan yang betul.

void quadraticCurveTo(dalam float cpx, dalam float cpy, dalam float x, dalam float y);

Kaedah quadraticCurveTo digunakan untuk melukis laluan spline kuadratik Parameter cpx dan cpy menentukan kedudukan titik kawalan, x dan y menentukan kedudukan titik akhir, dan titik permulaan ialah titik permulaan lukisan yang dikekalkan oleh. Konteks.

kosongkan bezierCurveTo(dalam float cp1x, dalam float cp1y, dalam float cp2x, dalam float cp2y, dalam float x, dalam float y);

Kaedah bezierCurveTo digunakan untuk melukis laluan lengkung Bezier Ia serupa dengan quadraticCurveTo, tetapi lengkung Bezier mempunyai dua titik kawalan, jadi cp1x, cp1y, cp2x, cp2y dalam parameter digunakan untuk menentukan kedudukan bagi. dua titik kawalan , manakala x dan y menentukan kedudukan jumbai.

ctx.moveTo(110, 50);

ctx.quadraticCurveTo(160, 0, 210, 50);

ctx.stroke();

ctx.beginPath(); ctx.strokeStyle = "merah";

ctx.moveTo(110, 50); stroke();

// bezierCurveTo
ctx.beginPath();
ctx.strokeStyle = "#000"; 250, 0, 280, 10, 320, 50);
ctx.stroke();
ctx.beginPath(); , 50);
ctx.lineTo(250, 0); 🎜>


4. isi, sapu, klip


Dua kaedah isian dan lejang mudah difahami dan digunakan untuk mengisi laluan dan melukis garisan laluan masing-masing.

Kaedah klip digunakan untuk menetapkan kawasan keratan untuk Kanvas Kod selepas memanggil kaedah klip hanya sah untuk kawasan keratan set ini dan tidak akan menjejaskan tempat lain. Secara lalai, kawasan keratan ialah segi empat tepat dengan sudut kiri atas pada (0, 0) dan lebar dan tinggi sama dengan lebar dan tinggi elemen Kanvas.




Apabila melukis gambar ini, walaupun fillRect(0, 0, 100, 100) digunakan dua kali untuk mengisi segi empat tepat 100x100, hasil yang dipaparkan ialah hanya kawasan kecil di tengah diisi untuk kali kedua kaedah klip digunakan untuk menetapkan kawasan keratan antara dua tampalan, supaya tampalan kedua hanya akan menjejaskan kawasan kecil di tengah.

Kesimpulan

Melalui kaedah laluan Kanvas, anda boleh menggunakan Kanvas untuk memproses beberapa grafik vektor mudah, supaya ia tidak akan diherotkan semasa menskala. Walau bagaimanapun, kaedah laluan Kanvas tidak begitu berkuasa, sekurang-kurangnya ia tidak mempunyai laluan elips...

Rujukan

1 Elemen Kanvas, WHATWG