HTML5 canvas

Elemen kanvas adalah bagian dari HTML5 dan memungkinkan untuk dinamis, skrip render bentuk 2D dan gambar bitmap. Ini adalah tingkat rendah, model prosedural yang update bitmap dan tidak memiliki grafik adegan built-in.

Sejarah

Canvas awalnya diperkenalkan oleh Apple untuk digunakan dalam komponen Apple sendiri yaitu OS Mac X WebKit pada tahun 2004,[1] untuk menggerakkan aplikasi seperti widget Dashboard dan browser Safari. Kemudian, pada tahun 2005 Canvas diadopsi dalam versi 1,8 browser Gecko,[2] dan Opera pada tahun 2006,[3] dan distandardisasi oleh Web Hypertext Application Technology Working Group (WHATWG) atau Kelompok Kerja Teknologi Aplikasi Web Hypertext pada spesifikasi yang diusulkan baru untuk teknologi web generasi berikutnya.[4]

Penggunaan

Canvas terdiri dari suatu daerah dapat ditarik didefinisikan dalam kode HTML dengan atribut tinggi dan atribut lebar. Kode JavaScript dapat mengakses daerah melalui set lengkap menggambar fungsi yang sama dengan yang lainnya API 2D umum, sehingga memungkinkan untuk grafis yang dihasilkan secara dinamis. Beberapa penggunaan diantisipasi canvas mencakup grafik bangunan, animasi, game, dan komposisi gambar.

Contoh

Kode berikut membuat elemen canvas dalam sebuah halaman HTML: 

<canvas id="example" width="200" height="200">
Teks ini ditampilkan jika browser Anda tidak mendukung HTML5 canvas.<br/>
</canvas>


Menggunakan JavaScript, anda dapat menggambar pada kanvas: 

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);


Kode ini menggambar persegi panjang merah di layar.

Dukungan

Unsur ini didukung oleh versi terbaru Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Konqueror dan Opera.[5]Versi lama dari Internet Explorer, versi 8 dan sebelumnya tidak mendukung canvas , tetapi plugin Google dan Mozilla juga tersedia.[6]

Sebuah gambaran rinci dari canvas support mengenai browser yang paling populer (sebagai persentase dari pangsa pasar per September 2012, diambil dari pangsa browser web Diarsipkan 2023-08-11 di Wayback Machine.)[7]

   Internet Explorer       Firefox       Safari (Desktop)       Chrome      Opera (Desktop)       Safari (Mobile)       Opera (Mobile)       Android Browser   
6.0 2.0 - 6.0 3.1 - 3.2 4.0 - 13.0 9.0 - 11.0 3.2 10.0 2.0
7.0 7.0 4.0 14.0 11.1 4.0 11.0 2.1
8.0 8.0 5.0 15.0 11.5 4.2 - 4.3 11.1 2.3,3.0
9.0 9.0 5.1 16.0 11.6 5.0 11.5 4.0
28.77% 19.70% 6.77% 30.01% 1.42% 2.79% 2.32% 3.02%

Daftar Pustaka

  1. ^ Ian Hixie (2004-07-12). "Extending HTML". Diarsipkan dari asli tanggal 2018-06-16. Diakses tanggal 2012-12-27.
  2. ^ Mozilla Developer Connection. "HTMLCanvasElement". Diarsipkan dari asli tanggal 2011-06-04. Diakses tanggal 2012-12-27.
  3. ^ "Opera 9.0 changelog". Diarsipkan dari asli tanggal 2012-09-10. Diakses tanggal 2012-12-27.
  4. ^ "HTML Standard". html.spec.whatwg.org. Diakses tanggal 2025-04-24.
  5. ^ Sucan, Mihai (4 Feb, 2010). "SVG or Canvas? Сhoosing between the two". Opera Software. Diarsipkan dari asli tanggal 2010-06-23. Diakses tanggal 16 January 2013. ;
  6. ^ "Mozilla drags IE into the future with Canvas element plugin". Ars Technica. 19 Aug, 2008. Diarsipkan dari asli tanggal 2012-05-06. Diakses tanggal 16 January 2013. ;
  7. ^ "Compatibility tables for the support of HTML5, CSS3, SVG". Diarsipkan dari asli tanggal 2017-04-08. Diakses tanggal 16 January 2013.

Lihat juga

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.