masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > HTML5 Canvas pembelajaran pengenalan tutorial_html5 kemahiran tutorial

HTML5 Canvas pembelajaran pengenalan tutorial_html5 kemahiran tutorial

WBOY
Lepaskan： 2016-05-16 15:45:41
asal
2070 orang telah melayarinya

HTML5

Apakah sebenarnya HTML5? Dalam Soalan Lazim W3C HTML5, ini dinyatakan tentang HTML5: HTML5 ialah lesen percuma yang dibangunkan di bawah platform terbuka.
Secara khusus, terdapat dua pemahaman tentang ayat ini:
“
merujuk kepada sekumpulan teknologi yang bersama-sama membentuk platform rangkaian terbuka masa hadapan Teknologi ini termasuk spesifikasi HTML5, CSS3, SVG, MATHML, Geolokasi, XmlHttpRequest. , Konteks 2D, Fon Web dan teknologi lain Sempadan set teknologi ini tidak formal dan berubah mengikut masa
Merujuk kepada spesifikasi HTML5 dan sudah tentu merupakan sebahagian daripada Platform Web Terbuka.

”


Sokongan Penyemak Imbas untuk Kanvas
Di bawah saya telah menyenaraikan penyemak imbas web paling popular dan nombor versi minimum yang mana mereka mula menyokong elemen Kanvas.


Saya mengesyorkan menggunakan Chrome di sini.

Halaman HTML5 yang ringkas

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >
  3. <html lang="zh" >
  5. <kepala>
  6.  <meta charset="UTF- 8"> 
  7.  <tajuk>Halaman HTML5 asas tajuk>
  8. kepala>
  10. <badan> Hello Airing badan>
  12. html>

Keputusan larian demo adalah seperti berikut:
2016317110813836.jpg (850×500)

HTML terdiri daripada elemen teg berbentuk seperti kurungan sudut <> biasanya muncul secara berpasangan dan teg hanya boleh bersarang dan tidak bersilang.
Sambungan:
Apa yang muncul secara berpasangan dipanggil teg tertutup, dan apa yang muncul secara tunggal dipanggil teg tunggal. Ia ditutup tidak kira apa pun (satu teg tidak perlu ditutup, tetapi penutupan diperlukan dengan ketat dalam XHTML). Teg penutup dibahagikan kepada teg permulaan dan teg akhir Contohnya, Label diri seperti
Untuk lebih banyak teg, anda disyorkan untuk mempelajari tentangnya sendiri. Kami mengesyorkan platform W3school untuk belajar sendiri.
Di sini kita fokus pada teg yang muncul dalam kod di atas.

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >

Teg ini menunjukkan bahawa pelayar web akan memaparkan halaman dalam mod standard. Ini diperlukan untuk dokumen HTML5 mengikut spesifikasi HTML5 yang ditakrifkan oleh W3C. Teg ini memudahkan perbezaan pelik yang telah lama wujud dalam cara pelayar berbeza memaparkan halaman HTML. Ia biasanya baris pertama dalam dokumen.

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <html lang="en" >

Ini ialah teg yang mengandungi perihalan bahasa, contohnya, "en" untuk bahasa Inggeris dan "zh" untuk bahasa Cina.

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <kepala>... kepala> 

Dua penanda ini masing-masing menunjukkan permulaan dan penghujung maklumat pengepala. Teg yang terkandung dalam pengepala ialah tajuk, kata pengantar, penerangan dan kandungan lain halaman Ia tidak dipaparkan sebagai kandungan itu sendiri, tetapi mempengaruhi kesan paparan halaman web. Teg yang paling biasa digunakan dalam pengepala ialah teg <title>

Jadual berikut menyenaraikan semua teg dan fungsi di bawah elemen kepala HTML:

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta charset="UTF-8"> 

Teg ini menerangkan mod pengekodan aksara yang digunakan oleh penyemak imbas web, yang biasanya ditetapkan kepada UTF-8 di sini. Tidak perlu menukarnya jika tiada tetapan khas diperlukan. Ini juga merupakan elemen yang diperlukan untuk halaman HTML5.

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <tajuk>... tajuk> 

Teg ini menerangkan tajuk HTML yang dipaparkan dalam tetingkap penyemak imbas. Ini adalah teg penting dan merupakan salah satu bahagian utama maklumat yang digunakan oleh enjin carian untuk mengindeks kandungan pada halaman HTML.

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <badan>... badan> 

Kandungan sebenar yang dipaparkan pada halaman web terkandung di antara kedua-dua ini.
Ringkasnya, halaman web HTML5 terdiri daripada bahagian dan dan ;bahagian teg kepala> dan badan yang ditentukan oleh .
Dengan cara ini, kami telah mengetahui struktur asas halaman web HTML yang paling mudah.

Tambah Kanvas
Menambah Kanvas dalam HTML adalah sangat mudah, cuma tambahkan teg Boleh rujuk kod di bawah.

Kod XML/HTMLSalin kandungan ke papan keratan
  1. ><html lang ="zh"><kepala> <meta charset="UTF-8"> ;<tajuk>halaman HTML5 asastajuk > kepala>
  2. <badan>
  3.  <kanvas id="kanvas" >
  4. Penyemak imbas anda tidak menyokong Kanvas? ! Cepat tukar! !
  5.  kanvas>badan> 
  6. html>

Memandangkan halaman hasil adalah halaman kosong sepenuhnya, saya tidak akan menyiarkan gambar di sini. Anda mungkin ingin tahu, mengapa ia kosong? (Karut, saya belum sempat melukis!) Maksud asal Kanvas ialah kanvas, yang bermaksud kanvas (karut...).
Apakah maksud teks dalam teg Iaitu, apabila pelayar tidak menyokong Kanvas semasa melaksanakan halaman HTML, teks ini akan dipaparkan dengan kata lain, selagi pelayar anda menyokong Kanvas, teks ini tidak akan dipaparkan pada halaman.
Apakah maksud id dalam id ialah salah satu atribut teg Ia digunakan dalam kod JavaScript untuk menentukan nama tertentu, sama seperti nombor ID seseorang, ia adalah unik.
Untuk memaparkan Kanvas dengan lebih jelas dan memudahkan demonstrasi berikutnya, saya mengubah suai sedikit kod, dan semua lukisan seterusnya akan dilukis pada Kanvas ini.

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >  
  2. <html lang="zh" >  
  3. <kepala>  
  4. <meta charset="UTF- 8">  
  5. <tajuk>基础的Kanvas tajuk>  
  6. kepala>  
  7.   
  8. <badan>  
  9. <div id="kanvas- meledingkan">  
  10.     <kanvas id="kanvas"  gaya="sempadan: 1px pepejal #aaaaa; paparan: sekat; margin: 50px auto;" lebar="800" tinggi=" 600">  
  11.     你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  12.     kanvas>  
  13. div>  
  14. badan>    
  15. html>  

Hasil jalankan:
2016317111155702.jpg (850×500)

Beberapa nota pada kod di atas:

1. Menambahkan teg

dan membungkus
2. Tentukan atribut lebar dan ketinggian untuk teg
3. Menambah gaya sebaris pada teg

Saya tidak akan menerangkan kandungan CSS di sini Lagipun, ia bukan protagonis kursus ini, dan ia akan mengambil banyak ruang untuk mengembangkannya.

Elemen Kanvas Rujukan


Model Objek Dokumen (DOM)
Model Objek Dokumen (DOM) ialah antara muka pengaturcaraan standard yang disyorkan oleh organisasi W3C untuk memproses bahasa penanda yang boleh diperluaskan. Sejarah Model Objek Dokumen boleh dikesan kembali kepada "perang pelayar" antara Microsoft dan Netscape pada akhir 1990-an Untuk bersaing untuk hidup dan mati dalam JavaScript dan JScript, kedua-dua pihak memberikan pelayar fungsi yang berkuasa secara besar-besaran. Microsoft telah menambahkan banyak perkara proprietari pada teknologi web, termasuk VBScript, ActiveX, dan format DHTML milik Microsoft sendiri, yang menyebabkan banyak halaman web tidak dapat dipaparkan dengan betul menggunakan platform dan penyemak imbas bukan Microsoft. DOM ialah karya agung yang dibancuh pada masa itu.
Model Objek Dokumen mewakili semua objek pada halaman HTML. Ia adalah neutral bahasa dan neutral platform. Ia membenarkan kandungan dan gaya halaman dikemas kini semula selepas ia dipaparkan oleh pelayar web. Pengguna boleh mengakses DOM melalui JavaScript.
Sebelum anda mula menggunakan , anda perlu terlebih dahulu memahami dua objek DOM tertentu: tetingkap dan dokumen.

Objek tetingkap ialah tahap tertinggi DOM Objek ini perlu dikesan untuk memastikan semua sumber dan kod telah dimuatkan sebelum mula menggunakan aplikasi Canvas.
Objek dokumen mengandungi semua teg HTML pada halaman HTML. Objek ini perlu diambil untuk mencari contoh

Lokasi peletakan JavaScript
Menggunakan JavaScript untuk memprogramkan Kanvas akan menyebabkan masalah: di mana untuk memulakan program JavaScript dalam halaman yang dibuat?
Letakkan JavaScript ke dalam Arah aliran terkini ialah meletakkan JavaScript sebelum teg pada penghujung dokumen HTML, dengan itu memastikan keseluruhan halaman telah dimuatkan semasa JavaScript sedang berjalan. Walau bagaimanapun, memandangkan anda perlu menggunakan JavaScript untuk menguji sama ada halaman dimuatkan sebelum menjalankan program adalah lebih baik untuk meletakkan JavaScript dalam <head>.
Namun, saya tidak mengambil jalan biasa (ketawa), jadi dalam kes berikutnya, saya masih meletakkan kod JavaScript di hujung mengikut gaya pengekodan saya sendiri. Sudah tentu, jika terdapat banyak kod JavaScript, adalah disyorkan untuk memuatkan fail .js luaran. Kodnya kira-kira seperti berikut:

Kod JavaScriptSalin kandungan ke papan keratan
    4. "canvas-warp"
  4. >
    5. "kanvas" style=
  5. "sempadan: 1px pepejal #aaaaa; paparan: blok; jidar: 50px auto ;" lebar="800"
    6. tinggi=
  6. "600"> Penyemak imbas anda tidak menyokong Kanvas? ! Cepat tukar! !
  • window.onload =
    • fungsi
  • (){
    • var
  • kanvas = document.getElementById(
    • "kanvas"
  • );
  • var konteks = canvas.getContext("2d"
    • );
  • }
  • Beberapa perkara yang perlu diberi perhatian: 1.Kod JavaScript perlu dibalut dengan tag
  • 2.window.onload = function(){} akan dilaksanakan serta-merta selepas memuatkan halaman, yang bermaksud kandungan badan fungsi selepas halaman dimuatkan dan dilaksanakan. Pada ketika ini, kanvas dan berus telah disediakan Seterusnya, mari kita gunakan berus (objek konteks) untuk melukis imej definisi tinggi! bangun! Jiwa seorang artis!
    • Label berkaitan：
    canvas html5
    sumber：php.cn
    Artikel sebelumnya：Contoh lukisan garisan asas HTML5 Kanvas tutorial_html5 kemahiran tutorial Artikel seterusnya：HTML5 Canvas melaksanakan bunga api yang mekar kesan khas_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