HTML5 canvas: Perbedaan antara revisi

← Revisi sebelumnya Revisi selanjutnya →

Konten dihapus Konten ditambahkan

Sebaris

Revisi per 29 September 2023 06.38

Elemen Kanvas atau HTML5 Canvas adalah komponen penting dalam HTML5 yang memungkinkan pengembang web untuk membuat grafika dinamis di dalam halaman web menggunakan bahasa pemrograman JavaScript.

Elemen ini membuka peluang kreatif yang luas dalam mengolah atau memproses gambar, bentuk 2D, dan juga mendukung pengembangan permainan 2D.Elemen kanvas adalah alat yang kuat untuk menciptakan pengalaman visual yang interaktif di web.

Sejarah

Pada tahun 2004, Apple memperkenalkan elemen kanvas untuk OS Mac X WebKit, digunakan dalam widget Dashboard dan Safari. Fitur ini diadopsi oleh peramban web Gecko pada tahun 2005, diikuti oleh Opera pada 2006, dan menjadi standar WHATWG. WHATWG adalah komunitas yang memajukan HTML, didirikan pada 2004 oleh perusahaan seperti Apple dan Mozilla. Ian Hickson, editor spesifikasi WHATWG, bergabung dengan Google. Meskipun diundang, Chris Wilson dari Microsoft tidak bergabung karena kebijakan paten.

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>

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

pada kode di atas akan memunculkan gambar persegi panjang berwarna merah di layar pengguna.

Dukungan

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

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.)^[3]

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

^ Sucan, Mihai (4 Feb, 2010). "SVG or Canvas? Сhoosing between the two". Opera Software. Diarsipkan dari versi asli tanggal 2010-06-23. Diakses tanggal 16 January 2013.
^ "Mozilla drags IE into the future with Canvas element plugin". Ars Technica. 19 Aug, 2008. Diarsipkan dari versi asli tanggal 2012-05-06. Diakses tanggal 16 January 2013.
^ "Compatibility tables for the support of HTML5, CSS3, SVG". Diarsipkan dari versi asli tanggal 2017-04-08. Diakses tanggal 16 January 2013.

Lihat juga

[1] Sucan, Mihai (4 Feb, 2010). "SVG or Canvas? Сhoosing between the two". Opera Software. Diarsipkan dari versi asli tanggal 2010-06-23. Diakses tanggal 16 January 2013.

[2] "Mozilla drags IE into the future with Canvas element plugin". Ars Technica. 19 Aug, 2008. Diarsipkan dari versi asli tanggal 2012-05-06. Diakses tanggal 16 January 2013.

[3] "Compatibility tables for the support of HTML5, CSS3, SVG". Diarsipkan dari versi asli tanggal 2017-04-08. Diakses tanggal 16 January 2013.

[1]

[2]

[3]

@@ Baris 1: / Baris 1: @@
+'''Elemen Kanvas''' atau '''HTML5 Canvas''' adalah komponen penting dalam HTML5 yang memungkinkan pengembang web untuk membuat grafika dinamis di dalam halaman web menggunakan bahasa pemrograman [[JavaScript|JavaScript.]]
-{{terjemahan|en|Canvas element|version=}}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.
+Elemen ini membuka peluang kreatif yang luas dalam mengolah atau memproses gambar, bentuk 2D, dan juga mendukung [[Pengembangan permainan video|pengembangan permainan]] 2D.Elemen kanvas adalah alat yang kuat untuk menciptakan pengalaman visual yang interaktif di web.
 == Sejarah ==
+Pada tahun 2004, Apple memperkenalkan elemen kanvas untuk OS Mac X [[WebKit]], digunakan dalam widget Dashboard dan [[Safari (peramban web)|Safari]]. Fitur ini diadopsi oleh [[peramban web]] Gecko pada tahun 2005, diikuti oleh [[Opera (peramban web)|Opera]] pada 2006, dan menjadi standar WHATWG. WHATWG adalah komunitas yang memajukan HTML, didirikan pada 2004 oleh perusahaan seperti [[Apple Inc.|Apple]] dan [[Mozilla]]. [[Ian Hickson]], editor spesifikasi WHATWG, bergabung dengan Google. Meskipun diundang, Chris Wilson dari Microsoft tidak bergabung karena kebijakan paten.
-Canvas awalnya diperkenalkan oleh [[Apple Inc.|Apple]] untuk digunakan dalam komponen sendiri OS [[Mac]] X [[WebKit]] pada tahun 2004,<ref>{{cite web | url=http://ln.hixie.ch/?start=1089635050&count=1 | author=Ian Hixie | title=Extending HTML | date=2004-07-12 | accessdate=2012-12-27 | archive-date=2018-06-16 | archive-url=https://web.archive.org/web/20180616080427/http://ln.hixie.ch/?start=1089635050&count=1 | dead-url=no }}</ref> menggerakkan aplikasi seperti widget Dashboard dan browser Safari. Kemudian, pada tahun 2005 itu diadopsi dalam versi 1,8 browser Gecko,<ref>{{cite web | url=https://developer.mozilla.org/en/DOM/HTMLCanvasElement | author=Mozilla Developer Connection | title=HTMLCanvasElement | accessdate=2012-12-27 | archive-date=2011-06-04 | archive-url=https://web.archive.org/web/20110604062413/https://developer.mozilla.org/en/DOM/HTMLCanvasElement | dead-url=yes }}</ref> dan Opera pada tahun 2006,<ref>{{Cite web |url=http://www.opera.com/docs/changelogs/windows/900/ |title=Opera 9.0 changelog |access-date=2012-12-27 |archive-date=2012-09-10 |archive-url=https://archive.today/20120910/http://www.opera.com/docs/changelogs/windows/900/ |dead-url=no }}</ref> dan standar oleh Teknologi Hypertext Aplikasi Web Kelompok Kerja (WHATWG) pada spesifikasi yang diusulkan baru untuk teknologi web generasi berikutnya.{{Citation needed|date=Decmber 2012}}
 == Penggunaan ==
@@ Baris 9: / Baris 11: @@
 == Contoh ==
 Kode berikut membuat elemen canvas dalam sebuah halaman HTML:
-<br/>
 <syntaxhighlight lang="html5">
 <canvas id="example" width="200" height="200">
@@ Baris 15: / Baris 16: @@
 </canvas>
 </syntaxhighlight>
-<br/>
-Menggunakan JavaScript, anda dapat menggambar pada kanvas:
-<br/>
 <syntaxhighlight lang="javascript">
 var example = document.getElementById('example');
@@ Baris 24: / Baris 22: @@
 context.fillRect(30, 30, 50, 50);
 </syntaxhighlight>
+pada kode di atas akan memunculkan gambar persegi panjang berwarna merah di layar pengguna.
-<br/>
-Kode ini menggambar persegi panjang merah di layar.
 == Dukungan ==