Wikipedia

HTML5 canvas: Perbedaan antara revisi

Jelajahi riwayat secara interaktif
← Revisi sebelumnya
Konten dihapus Konten ditambahkan
VisualTeks wiki
S Rifqi (bicara | kontrib)
1.418 suntingan
Tidak ada ringkasan suntingan
Kim Nansa (bicara | kontrib)
3.057 suntingan
Fitur saranan suntingan: 3 pranala ditambahkan.
 
(12 revisi perantara oleh 9 pengguna tidak ditampilkan)
Baris 1:
{{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.
 
== Sejarah ==
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 [[Hiperteks|Hypertext]] [[Aplikasi web|Aplikasi Web]] Kelompok Kerja (WHATWG) pada spesifikasi yang diusulkan baru untuk teknologi web generasi berikutnya.{{Citation needed|date=Decmber 2012}}
 
== 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 [[Antarmuka pemrograman aplikasi|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:
<br/>
<sourcesyntaxhighlight lang="html5">
<canvas id="example" width="200" height="200">
Teks ini ditampilkan jika browser Anda tidak mendukung HTML5 canvas.<br/>
</canvas>
</syntaxhighlight>
</source>
<br/>
Menggunakan JavaScript, anda dapat menggambar pada kanvas:
<br/>
<sourcesyntaxhighlight lang="javascript">
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);
</syntaxhighlight>
</source>
<br/>
Kode ini menggambar persegi panjang merah di layar.
 
== Dukungan ==
Unsur ini didukung oleh versi terbaru [[Mozilla Firefox]], [[Google Chrome]], [[Internet Explorer]], [[Safari (peramban web) | Safari]], [[Konqueror]] dan [[Opera (peramban web)|Opera]].<ref>{{cite web|url=http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/|title=SVG or Canvas? Сhoosing between the two|last=Sucan|first=Mihai|date=4 Feb, 2010|publisher=[[Opera Software]]|accessdate=16 January 2013|archive-date=2010-06-23|archive-url=https://web.archive.org/web/20100623002104/http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/|dead-url=no}}</ref>Versi lama dari Internet Explorer, versi 8 dan sebelumnya tidak mendukung <code> canvas </code>, namun plugin Google dan Mozilla juga tersedia.<ref>{{cite web|url=http://arstechnica.com/software/news/2008/08/mozilla-drags-ie-into-the-future-with-canvas-element-plugin.ars|title=Mozilla drags IE into the future with Canvas element plugin|date=19 Aug, 2008|publisher=[[Ars Technica]]|accessdate=16 January 2013|archive-date=2012-05-06|archive-url=https://web.archive.org/web/20120506081545/http://arstechnica.com/software/news/2008/08/mozilla-drags-ie-into-the-future-with-canvas-element-plugin.ars|dead-url=no}}</ref>
 
Sebuah gambaran rinci dari<code> canvas </code> support mengenai browser yang paling populer (sebagai persentase dari pangsa pasar per September 2012, diambil dari [[http://en.wiki-indonesia.club/wiki/Usage_share_of_web_browsers#StatCounter_.28July_2008_to_present.29|Penggunaan pangsa browser web]] {{Webarchive|url=https://web.archive.org/web/20230811151604/https://en.wiki-indonesia.club/wiki/Usage_share_of_web_browsers#StatCounter_.28July_2008_to_present.29{{!}}Penggunaan |date=2023-08-11 }})<ref>{{cite web|url=http://caniuse.com/#search=canvas|title=Compatibility tables for the support of HTML5, CSS3, SVG|publisher=|date=|accessdate=16 January 2013|archive-date=2017-04-08|archive-url=https://web.archive.org/web/20170408034823/http://caniuse.com/#search=canvas|dead-url=no}}</ref>
 
{| class="wikitable" style="text-align: center; background-color:#FFFFFF; margin-left:5px;"
Baris 47:
|}
 
== Daftar Pustaka ==
{{Reflist}}
 
== Lihat juga ==
* [[WebGL]]
* [[HTML5]]
* [[HTML5 video]]
{{Authority control}}
 
[[Kategori:HTML5]]
[[Kategori:JavascriptJavaScript]]
 
[[cs:Canvas]]
[[de:Canvas (HTML-Element)]]
[[en:Canvas element]]
[[es:Canvas (HTML)]]
[[fr:Canvas (HTML)]]
[[it:Canvas (elemento HTML)]]
[[lv:Canvas elements]]
[[hu:Canvas]]
[[ja:Canvas要素]]
[[pl:HTML5 Canvas]]
[[pt:Canvas (HTML5)]]
[[ru:Canvas (HTML)]]
[[uk:Canvas]]
[[zh:Canvas (HTML元素)]]
Diperoleh dari "https://wiki-indonesia.club/wiki/HTML5_canvas"