masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > Belajar sambil bermain dengan HTML5 (1) Kaedah pelaksanaan kanvas _html5 kemahiran tutorial

Belajar sambil bermain dengan HTML5 (1) Kaedah pelaksanaan kanvas _html5 kemahiran tutorial

WBOY
Lepaskan： 2016-05-16 15:51:20
asal
1554 orang telah melayarinya
1. tag

Html5 memperkenalkan teg baharu pada kanvas ini. Dengan teg ini, prestasi grafik penyemak imbas telah dipertingkatkan dengan ketara Adakah Flash dan SilverLight berasa terancam

Pautan berita: Google mendakwa bahawa penyemak imbas Chrome 7 akan menjadi 60 kali lebih pantas

penggunaan teg adalah sangat mudah, seperti berikut:

Salin kod
Kodnya adalah seperti berikut :


Pelayar anda tidak menyokong Kanvas tag



Anda boleh menetapkan lebar dan tingginya, dan menetapkan warna latar belakangnya, sempadan gaya, dsb. melalui CSS tunggu.

Anda boleh mendapatkan lebih banyak tentang teg di sini. Kandungan di tengah teg

ialah kandungan gantian Jika penyemak imbas pengguna tidak menyokong teg , maka kandungan ini akan dipaparkan Kandungan bahagian tersebut akan diabaikan.

Kod di atas dipaparkan seperti berikut:

Pelayar anda tidak menyokong teg Kanvas

Jika anda menggunakan penyemak imbas IE, anda mungkin hanya boleh lihatnya Dapatkan petua jika anda menggunakan Google Chrome atau Firefox, anda boleh melihat kawasan persegi merah.
2. Konteks Rendering
Malah, kami tidak boleh melakukan apa-apa hanya dengan teg mesti mendapatkan konteks Peranti DC terlebih dahulu, lukisan pada teg juga memerlukan terlebih dahulu mendapatkan konteks pemaparan Grafik kami tidak dilukis terus ke skrin, tetapi ke konteks (Konteks) dahulu, dan kemudian dimuat semula ke skrin. .
Di luar topik: Mengapakah kita perlu mencipta konsep yang rumit seperti "konteks"? Oleh kerana objek konteks, kita boleh membuat pelbagai peranti grafik kelihatan sama di mata kita perkara konkrit menjadi abstrak yang bersatu, dengan itu mengurangkan beban kita.
Mendapatkan konteks adalah sangat mudah, hanya memerlukan dua baris kod berikut:
var canvas = document.getElementById('tutorial'
var ctx = canvas.getContext('2d'); 🎜>Dapatkan objek kanvas dahulu, dan kemudian panggil kaedah getContext bagi objek kanvas pada masa ini hanya boleh lulus dalam parameter "2d" dalam masa terdekat, ia mungkin menyokong parameter "3d". maksudnya, sama-sama kita nantikan.
Kaedah getContext mengembalikan objek CanvasRenderingContext2D, iaitu objek konteks pemaparan Anda boleh mendapatkan maklumat lanjut tentangnya
di sini, iaitu beberapa kaedah lukisan.

3 Sokongan penyemak imbas Selain memaparkan kandungan alternatif pada penyemak imbas yang tidak disokong, kami juga boleh menggunakan skrip untuk menyemak sama ada penyemak imbas menyokong kanvas , kaedahnya sangat mudah, cuma tentukan sama ada fungsi getContext wujud, kodnya adalah seperti berikut:


Salin kodKod adalah seperti berikut:
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
alert("Supports tag");
alert(" tag tidak disokong");
}



四、一个小例子
下面将用 HTML5 的绘图功能演示一个上下移动的线条的例子， 具体的代码将在后续内容中给出



提示：您可以先修改部分代码再运行

你的浏览器不支持 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
Label berkaitan：
html5
sumber：php.cn
Artikel sebelumnya：Penyelesaian kepada petua tutorial HTML5_html5 yang menyokong IE Artikel seterusnya：html5 belajar pemilih warna yang mudah _html5 kemahiran tutorial
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...
daripada 2024-04-06 15:33:12
0
1
433
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Apakah perbezaan antara enctype dan formenctype dalam HTML5? Saya hanya tertanya-tanya apakah perbezaan antara atribut enctype dan formenctype dalam HT...
daripada 2024-04-02 11:47:56
0
1
275
Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....
daripada 2024-04-01 20:42:38
0
1
259
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan