Beranda>Tutorial Desain Web>tutorial HTML

HTML5 Canvas Element Detail Tutorial 1

Penulis：Eve Cole Waktu Pembaruan：2025-04-05 11:00:03
HTML5 Canvas Element Tutorial Detail 1: Penggunaan Dasar.

<Canvas> adalah elemen baru dalam HTML5, yang dapat digunakan oleh JavaScript untuk menggambar grafik. Pertama, <Canvas> diperkenalkan di dasbor Apple Mac OS X, yang diterapkan pada Safari, dan kemudian berdasarkan browser Gecko1.8, yang juga mendukung elemen baru ini, seperti browser Firefox. Saat ini, elemen <an Canvas> adalah bagian dari spesifikasi standar HTML5.

Kami akan menjelaskan apa yang dapat dilakukan <Canvas>, melalui tutorial ini, dan dapat digunakan sebagai titik awal untuk aplikasi Anda <Canvas>. Mempelajari elemen <an Canvas> tidak sulit. Anda hanya perlu memiliki pengetahuan dasar tentang HTML dan JavaScript, serta browser Firefox, Safari versi terbaru atau Opera9+, sehingga Anda dapat melihat semua efek contoh.

Sekarang mari kita mulai dengan cara mendefinisikan elemen <an Canvas>.

<Canvas ID = Lebar Tutorial = 150 Tinggi = 150> </Canvas>

Elemen <an Canvas> hanya memiliki dua atribut, lebar dan tinggi, yang opsional dan dapat dikontrol menggunakan DOM atau CSS. Jika lebar dan tinggi tidak diatur, lebar default adalah 300 piksel dan tinggi 150 piksel digunakan. Meskipun ukuran <Canvas> dapat dikontrol dan disesuaikan melalui CSS, gambar yang diberikan akan ditingkatkan untuk beradaptasi dengan tata letak. Setelah hasil rendering ditemukan terlihat cacat, Anda tidak perlu mengandalkan CSS. Anda dapat menentukan nilai lebar dan tinggi yang ditampilkan di <Canvas>. Sama seperti tag HTML standar, atribut ID juga dapat didefinisikan, yang dapat membuat aplikasi skrip lebih nyaman. Elemen <an Canvas> dapat menentukan gayanya (margin, perbatasan, latar belakang, dll.) Seperti gambar normal. Namun, gaya ini tidak memiliki efek pada gambar aktual yang dihasilkan oleh kanvas.

Karena elemen ini relatif baru, tidak semua browser mendukungnya, jadi kami perlu memberikan informasi tampilan alternatif bagi mereka yang tidak dapat menelusuri secara normal. Itu dapat menggunakan teks atau gambar:

  1.  <canvasid = stockgraphwidth = 150Height = 150>
  2.  Browser Anda tidak mendukung elemen <an Canvas>.
  3.  </ Canvas>
  4.  <canvasid = clockwidth = 150Height = 150>
  5.  <imgsrc = gambar.pngwidth = 150Height = 150Alt = Ganti gambar/
  6.  </ Canvas>

Di Apple Safari, implementasi <Canvas> sangat mirip dengan <mmg>, dan tidak memiliki tag akhir. Namun, agar <Canvas> dapat diterapkan secara luas di dunia web, konten alternatif perlu disediakan dengan tempat tinggal, sehingga perlu untuk mengakhiri tag (</ Canvas>) dalam implementasi Mozilla. <Canvas ID = foo ...> </Canvas> sepenuhnya kompatibel dengan Safari dan Mozilla - Safari mengabaikan tag akhir. Jika ada konten alternatif, Anda dapat menggunakan beberapa trik CSS untuk menyembunyikan konten alternatif dan hanya untuk Safari, karena konten alternatif tersebut perlu ditampilkan di IE tetapi tidak di Safari.

<Canvas> membuat layar gambar ukuran tetap dengan satu atau lebih konteks rendering yang dapat mengontrol apa yang harus ditampilkan. Kami fokus pada rendering 2D, yang juga merupakan satu -satunya pilihan saat ini. Kami dapat menambahkan rendering 3D berdasarkan OpenGl ES di masa depan.

  1.  varcanvas = document.getElementById ('tutorial');
  2.  varctx = canvas.getContext ('2d');

Mari kita jelaskan kode di atas. Inisialisasi <an Canvas> kosong. Untuk menggambar skrip, Anda perlu membuat konteks terlebih dahulu. Ini dapat diperoleh melalui metode getContext objek elemen kanvas. Pada saat yang sama, beberapa fungsi yang perlu dipanggil untuk menggambar juga diperoleh. getContext () menerima nilai yang menggambarkan jenisnya sebagai argumen. Baris pertama di atas memperoleh simpul DOM dari objek Canvas melalui metode GetElementById. Kemudian gunakan metode GetContext -nya untuk mendapatkan konteks operasi menggambarnya. Selain itu, kami juga dapat menggunakan skrip untuk menentukan dukungan browser untuk <Canvas>, yaitu, untuk menentukan apakah ada getContext.

  1.  varcanvas = document.getElementById ('tutorial');
  2.  if (canvas.getContext) {
  3.  varctx = canvas.getContext ('2d');
  4.  // DrawingCodeSher
  5.  }kalau tidak{
  6.  // Canvas-UnsupportedCodeHere
  7.  }

Kami mulai dengan templat paling sederhana di bawah ini, Anda dapat menyalinnya ke cadangan lokal Anda.

  1.  <Html>
  2.  <head>
  3.  <title> canvastutorial </iteme>
  4.  <ScriptType = Text/JavaScript>
  5.  functionDraw () {
  6.  varcanvas = document.getElementById ('tutorial');
  7.  if (canvas.getContext) {
  8.  varctx = canvas.getContext ('2d');
  9.  }
  10.  }
  11.  </script>
  12.  <styletype = text/css>
  13.  Canvas {border: 1pxsolidblack;}
  14.  </tyle>
  15.  </head>
  16.  <bodyonload = draw ();>
  17.  <canvasid = tutorialWidth = 150Height = 150> </canvas>
  18.  </body>
  19.  </html>

Dengan hati -hati Anda akan menemukan fungsi yang disebut draw, yang akan dieksekusi sekali setelah halaman dimuat (dengan mengatur properti onload dari tag tubuh), dan tentu saja juga dapat dipanggil di setTimeout, setInterval, atau fungsi penanganan acara lainnya.

Untuk memulai, mari kita lihat secara sederhana - gambar dua persegi panjang interlaced, salah satunya memiliki efek transparan alfa. Kami akan memberi Anda pandangan terperinci tentang cara kerjanya dalam contoh berikut.

  1.  <Html>
  2.  <head>
  3.  <ScriptType = Application/X-JavaScript>
  4.  functionDraw () {
  5.  varcanvas = document.geteLementById (canvas);
  6.  if (canvas.getContext) {
  7.  varctx = canvas.getContext (2D);
  8.  ctx.fillstyle = rgb (200,0,0);
  9.  ctx.fillrect (10,10,55,50);
  10.  ctx.fillstyle = rgba (0,0,200,0,5);
  11.  ctx.fillrect (30,30,55,50);
  12.  }
  13.  }
  14.  </script>
  15.  </head>
  16.  <bodyonload = draw ();>
  17.  <canvasid = canvaswidth = 150Height = 150> </canvas>
  18.  </body>
  19.  </html>

Anda dapat menyalin kode di atas ke file html untuk dijalankan, rendering:

Artikel Terkait