kanvas ialah teg yang disediakan oleh HTML5 untuk memaparkan kesan lukisan Teg "" menyediakan kawasan grafik kosong (kawasan segi empat tepat kanvas) dan memerlukan penggunaan API JavaScript tertentu melukis grafik.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.

1. Apakah itu Kanvas

kanvas ialah teg yang disediakan oleh HTML5 untuk memaparkan kesan lukisan

kanvas menyediakan kawasan grafik kosong yang boleh digunakan dengan API JavaScript khusus untuk melukis grafik (kanvas 2D atau WebGL)
Pertama kali diperkenalkan oleh Apple, digunakan dalam papan pemuka OS X dan penyemak imbas Safari

1.1 Beberapa nota tentang Kanvas

kanvas ialah Kawasan segi empat tepat kanvas yang boleh dilukis menggunakan JavaScript. Kawal setiap pikselnya.

Teg kanvas menggunakan JavaScript untuk melukis imej pada halaman web dan tidak mempunyai fungsi lukisan itu sendiri.

kanvas mempunyai berbilang kaedah untuk melukis laluan, segi empat tepat, bulatan, aksara dan menambah imej.

1.2 Bidang aplikasi utama kanvas (faham)

1) Permainan: kanvas adalah lebih tiga dimensi dan lebih canggih daripada Flash dari segi paparan imej berasaskan web cecair dan platform silang lebih baik.

2), data visual (carta data), seperti: Baidu’s echart, d3.js, three.js

3), pengiklanan sepanduk: Flash pernah menjadi era kegemilangan, telefon pintar Mempunyai belum muncul lagi. Kini dan dalam era telefon pintar akan datang, teknologi HTML5 boleh memainkan peranan besar dalam pengiklanan sepanduk, dan menggunakan Kanvas untuk mencapai kesan pengiklanan dinamik adalah sempurna.

4), masa depan

Simulator: Dari segi kesan visual dan fungsi teras, produk simulator boleh dilaksanakan sepenuhnya oleh JavaScript.

Kawalan komputer jauh: Kanvas membenarkan pembangun untuk melaksanakan penghantaran data berasaskan web dengan lebih baik dan membina antara muka kawalan visual yang sempurna.

Editor Grafik: Editor grafik Photoshop akan 100% berasaskan web.

2. Pengenalan kepada tag Kanvas

<canvas width="600" height="400"></canvas>

Fungsi: Memaparkan kandungan lukisan, tetapi tidak boleh melukis

2.1 Keserasian kanvas

<canvas width="600" height="400">
    IE9及其以上版本的浏览器，才支持canvas标签
    提示：您的浏览器不支持canvas，请升级浏览器
</canvas>

2.2 Nota tentang menetapkan lebar dan tinggi

1) Anda boleh menggunakan atribut html/atribut DOM lebar dan tinggi untuk menetapkan

2) Jangan: gunakan gaya CSS untuk menetapkan lebar dan tinggi

Menggunakan atribut untuk menetapkan lebar dan tinggi sebenarnya adalah bersamaan dengan meningkatkan piksel kanvas

Lebar dan ketinggian lalai: 300*150, yang bermaksud: 300 piksel dalam arah mendatar dan 150 piksel dalam arah menegak

Menggunakan atribut untuk menetapkan lebar dan ketinggian menambah atau mengurangkan piksel kanvas

Menggunakan gaya css tidak meningkatkan piksel, tetapi hanya mengembangkan setiap piksel!

2.3 Lukisan

Gunakan API lukisan yang disediakan dalam JavaScript untuk melukis

Setiap kanvas mempunyai set API lukisan (alat)

2.3 .1 Langkah asas lukisan

1 Cari kanvas

2) Dapatkan konteks lukisan (satu siri koleksi API) melalui kanvas

3) Gunakan API untuk melukis grafik yang diperlukan

// 1）、找到canvas
 var cv = document.getElementById("canvasId");
 
// 2）、拿到canvas绘图上下文
 var ctx = cv.getContext("2d");
 
// 3）、使用上下文中的API绘制图形
 ctx.moveTo(100, 100);   // 将画笔移动到 100,100 的位置
 ctx.lineTo(200, 100);   // 从 100,100 到 200,100 画一条线段
 ctx.stroke();           // 描边

Tutorial yang disyorkan: "tutorial video html"

Atas ialah kandungan terperinci Apakah itu html5 canvas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!