<Canvas> adalah elemen HTML baru yang dapat digunakan oleh bahasa skrip (biasanya JavaScript) untuk menggambar grafik. Misalnya, dapat digunakan untuk menggambar gambar, mensintesis gambar, atau melakukan animasi sederhana (dan tidak begitu sederhana). Gambar di sebelah kanan menunjukkan beberapa contoh aplikasi <Canvas>, dan kami akan melihat implementasinya dalam tutorial ini.
<Canvas> pertama kali diperkenalkan di dasbor Mac OS X Apple dan kemudian diterapkan pada Safari. Browser berdasarkan Gecko1.8, seperti Firefox 1.5, juga mendukung elemen baru ini. Elemen <CanVas> adalah bagian dari WhatwG Web Applications 1.0, yang diketahui semua orang, spesifikasi standar HTML 5.
Dalam tutorial ini, saya akan mencoba memberi tahu Anda cara menggunakan elemen <an Canvas> di halaman web Anda sendiri. Contoh yang diberikan harus memberi Anda beberapa konsep yang jelas, yaitu apa yang dapat Anda lakukan dengan <Canvas>. Contoh -contoh ini juga dapat berfungsi sebagai titik awal untuk aplikasi Anda <Canvas>.
Sebelum Anda mulai menggunakan
Menggunakan elemen <nan Canvas> tidak sulit, selama Anda memiliki pengetahuan dasar tentang HTML dan JavaScript.
Seperti disebutkan di atas, tidak semua browser modern mendukung elemen <an Canvas>, jadi Anda membutuhkan Firefox 1.5 atau lebih baru, atau browser berbasis Gecko lainnya seperti Opera 9, atau versi Safari terbaru untuk melihat semua tindakan contoh.
elemen <an kanvas>
Mari kita mulai tutorial ini dengan melihat elemen <an Canvas> itu sendiri.
Mari kita mulai dengan definisi elemen <an Canvas>.
<Canvas ID = Lebar Tutorial = 150 Tinggi = 150> </Canvas>
Ini sangat mirip dengan elemen <mmg>, satu -satunya perbedaan adalah tidak memiliki atribut SRC dan ALT. <Canvas> sangat mirip dengan <mmg>, satu -satunya perbedaan adalah tidak memiliki atribut SRC dan ALT. Elemen <an Canvas> hanya memiliki dua atribut - lebar dan tinggi . Keduanya opsional dan juga dapat diatur menggunakan Properti DOM atau aturan CSS. Ketika tidak ada atribut lebar dan tinggi yang ditentukan, kanvas pada awalnya akan selebar 300 piksel dan tinggi 150 piksel . Elemen dapat diukur secara sewenang -wenang oleh CSS, tetapi selama rendering gambar diskalakan agar sesuai dengan ukuran tata letaknya. (if your renderings seem distorted, try specifying your width and height attributes explicitly in the <canvas> attributes, and not with css.) Although the size of the canvas can be resized through css, the rendering image will scale to adapt to the layout (if you find that the rendering results look deformed, you don't have to rely on css, you can try to explicitly specify the width and height attribute values of kanvas).
Atribut ID tidak spesifik untuk elemen <an CanVas> tetapi merupakan salah satu atribut HTML default yang dapat diterapkan pada (hampir) setiap elemen HTML (seperti kelas misalnya). Itu selalu merupakan ide yang baik untuk menyediakan ID karena ini membuatnya lebih mudah untuk mengidentifikasinya dalam skrip kami.
Atribut ID tidak eksklusif untuk <Canvas>. Sama seperti tag HTML standar, elemen HTML apa pun dapat menentukan nilai ID -nya. Secara umum, adalah ide yang baik untuk menentukan ID untuk suatu elemen, yang membuatnya lebih mudah untuk diterapkan dalam skrip.
Elemen <an Canvas> dapat ditata seperti gambar normal apa pun (margin, perbatasan, latar belakang, dll). Namun aturan ini tidak mempengaruhi gambar yang sebenarnya pada kanvas. Kita akan melihat bagaimana ini dilakukan nanti dalam tutorial ini. Ketika tidak ada aturan penataan yang diterapkan pada kanvas, awalnya akan sepenuhnya transparan. Elemen <an Canvas> dapat ditata seperti gambar normal apa pun (margin, perbatasan, latar belakang, dll). Namun aturan ini tidak mempengaruhi gambar yang sebenarnya pada kanvas. Kita akan melihat bagaimana ini dilakukan nanti dalam tutorial ini. Ketika tidak ada aturan penataan yang diterapkan pada kanvas, awalnya akan sepenuhnya transparan. Elemen <an Canvas> dapat ditata seperti gambar normal (margin, batas, latar belakang, dll.) Seolah -olah itu adalah gambar normal. Namun, gaya ini tidak memiliki efek pada gambar aktual yang dihasilkan oleh kanvas. Di bawah ini kita akan melihat cara menerapkan gaya. Jika Anda tidak menentukan gaya, kanvas sepenuhnya transparan secara default.
Karena elemen <an Canvas> masih relatif baru dan tidak diimplementasikan di beberapa browser (seperti Firefox 1.0 dan Internet Explorer), kami membutuhkan sarana untuk menyediakan konten fallback ketika browser tidak mendukung elemen tersebut.
Karena <Canvas> relatif baru, beberapa browser tidak mengimplementasikannya, seperti Firefox 1.0 dan Internet Explorer, kita perlu menyediakan konten tampilan alternatif untuk browser yang tidak mendukung kanvas.
Beruntung ini sangat mudah: kami hanya menyediakan konten alternatif di dalam elemen kanvas. Browser yang tidak mendukungnya akan mengabaikan elemen sepenuhnya dan membuat konten fallback, orang lain hanya akan membuat kanvas secara normal.
Misalnya kami dapat memberikan deskripsi teks tentang konten kanvas atau memberikan gambar statis dari konten yang diberikan secara dinamis. Ini bisa terlihat seperti ini:
Kami hanya perlu memasukkan konten pengganti langsung ke elemen kanvas. Browser yang tidak mendukung kanvas akan mengabaikan elemen kanvas dan secara langsung membuat konten alternatif, sementara browser yang didukung akan membuat kanvas secara normal. Misalnya, kita dapat mengisi beberapa teks atau gambar ke dalam kanvas sebagai konten alternatif:
<Canvas ID = StockGraph Width = 150 Tinggi = 150> Harga Saham Saat Ini: $ 3.15 +0.15 </an Canvas> <Canvas ID = Lebar Jam = 150 Tinggi = 150> <img src = gambar/clock.png lebar = 150 tinggi = 150/> </canvas>
Dalam implementasi Apple Safari, <Canvas> adalah elemen yang diimplementasikan dengan cara yang sama seperti <MG> adalah; itu tidak memiliki tag akhir. Namun, agar <Canvas> memiliki penggunaan luas di web, beberapa fasilitas untuk konten fallback harus disediakan. Oleh karena itu, implementasi Mozilla memerlukan tag akhir (</ 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, perlu untuk menyediakan tempat untuk konten alternatif, jadi mengakhiri tag (</an Canvas>) dalam implementasi Mozilla diperlukan.
Jika konten fallback tidak diperlukan, <Canvas ID = foo ...> </ Canvas> sederhana akan sepenuhnya kompatibel dengan Safari dan Mozilla - Safari hanya akan mengabaikan tag akhir.
Jika tidak ada pengganti, <Canvas ID = foo ...> </Canvas> sepenuhnya kompatibel dengan Safari dan Mozilla - Safari cukup mengabaikan tag akhir.
Jika konten fallback diinginkan, beberapa trik CSS harus digunakan untuk menutupi konten fallback dari Safari (yang seharusnya membuat kanvas), dan juga untuk menutupi trik CSS sendiri dari IE (yang seharusnya membuat konten fallback).
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.
<an Canvas> Membuat permukaan gambar ukuran tetap yang memaparkan satu atau lebih konteks rendering , yang digunakan untuk membuat dan memanipulasi konten yang ditunjukkan. Kami akan fokus pada konteks rendering 2D, yang merupakan satu -satunya konteks rendering yang ditentukan saat ini. Di masa depan, konteks lain dapat memberikan berbagai jenis rendering; Misalnya, ada kemungkinan bahwa konteks 3D berdasarkan OpenGL ES akan ditambahkan.
Layar gambar ukuran tetap yang dibuat oleh <Canvas> membuka satu atau lebih konteks rendering , yang melaluinya kita dapat mengontrol apa yang harus ditampilkan. Kami fokus pada rendering 2D, yang juga merupakan satu -satunya pilihan saat ini, dan dapat menambahkan konteks 3D berdasarkan OpenGl ES di masa depan.
<sets> awalnya kosong, dan untuk menampilkan sesuatu yang pertama kali perlu diakses oleh skrip untuk mengakses konteks render dan menggambar di atasnya. Elemen Canvas memiliki metode DOM yang disebut GetContext, digunakan untuk mendapatkan konteks rendering dan fungsi menggambarnya. getContext () mengambil satu parameter, jenis konteks.
Inisialisasi <an Canvas> kosong. Untuk menggambar skrip di atasnya, pertama -tama membutuhkan konteks renderingnya. Ini dapat diperoleh melalui metode getContext objek elemen kanvas. Pada saat yang sama, beberapa fungsi diperoleh untuk menggambar. getContext () menerima nilai yang menggambarkan jenisnya sebagai argumen.
var canvas = document.getElementById ('tutorial'); var ctx = canvas.getContext ('2d');Di baris pertama kami mengambil simpul dom kanvas menggunakan metode GetlementById. Kami kemudian dapat mengakses konteks gambar menggunakan metode GetContext.
Baris pertama di atas memperoleh simpul DOM dari objek Canvas melalui metode GetElementById. Kemudian, konteks operasi menggambar diperoleh melalui metode GetContext -nya.
Konten Fallback ditampilkan di browser yang tidak mendukung <Canvas>; Script juga dapat memeriksa dukungan saat mereka mengeksekusi. Ini dapat dengan mudah dilakukan dengan menguji metode GetContext. Cuplikan kode kami dari atas menjadi sesuatu seperti ini:
Selain menampilkan konten alternatif pada browser yang tidak didukung, Anda juga dapat memeriksa apakah browser mendukung kanvas melalui skrip. Metode ini sangat sederhana, cukup menilai apakah ada getContext.
var canvas = document.getElementById ('tutorial'); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); // Menggambar kode di sini} else {// Canvas-Unsupported code di sini}Berikut ini adalah templat minimalis, yang akan kami gunakan sebagai titik awal untuk contoh selanjutnya. Anda dapat mengunduh file ini untuk dikerjakan di sistem Anda.
Kami akan mulai dengan templat kode paling sederhana berikut (diperlukan untuk contoh -contoh berikutnya), dan Anda dapat mengunduh file yang akan digunakan secara lokal.
<Html> <Head> <title> tutorial kanvas </iteme> <script type = text/javascript> function draw () {var canvas = document.getElementById ('tutorial'); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); }} </script> <style type = text/css> canvas {border: 1px solid black; } </tyle> </head> <body onload = draw ();> <canvas id = width tutorial = 150 tinggi = 150> </canvas> </body> </html>Jika Anda melihat skrip yang akan Anda lihat, saya telah membuat fungsi yang disebut draw, yang akan dieksekusi setelah halaman selesai memuat (melalui atribut onload pada tag tubuh). Fungsi ini juga bisa dipanggil dari setTimeout, setInterval, atau fungsi penangan acara lainnya selama halaman telah dimuat terlebih dahulu.
Jika Anda berhati -hati, Anda akan menemukan bahwa saya telah menyiapkan 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, inilah contoh sederhana yang menarik dua persegi panjang berpotongan, salah satunya memiliki transparansi alfa. Kami akan mengeksplorasi cara kerjanya dalam detail lebih lanjut dalam contoh -contoh selanjutnya.
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.
<html> <adept> <script type = application/x-javaScript> function draw () {var canvas = document.getElementById (canvas); if (canvas.getContext) {var ctx = canvas.getContext (2D); ctx.fillstyle = rgb (200,0,0); ctx.fillrect (10, 10, 55, 50); ctx.fillstyle = rgba (0, 0, 200, 0,5); ctx.fillrect (30, 30, 55, 50); }} </script> </head> <body onload = draw ();> <canvas id = canvas width = 150 tinggi = 150> </canvas> </body> </html>