HTML5 canvas: Perbedaan antara revisi
k Robot: Perubahan kosmetika |
Tidak ada ringkasan suntingan Tag: Suntingan perangkat seluler Suntingan peramban seluler |
||
| Baris 1: | 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 == |
== 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 }}</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}}</ref> dan Opera pada tahun 2006,<ref>[http://www.opera.com/docs/changelogs/windows/900/ Opera 9.0 changelog]</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}} |
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 }}</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}}</ref> dan Opera pada tahun 2006,<ref>[http://www.opera.com/docs/changelogs/windows/900/ Opera 9.0 changelog]</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}} |
||
Revisi per 30 Agustus 2017 16.50
Sejarah
Canvas awalnya diperkenalkan oleh Apple untuk digunakan dalam komponen sendiri OS Mac X WebKit pada tahun 2004,[1] menggerakkan aplikasi seperti widget Dashboard dan browser Safari. Kemudian, pada tahun 2005 itu diadopsi dalam versi 1,8 browser Gecko,[2] dan Opera pada tahun 2006,[3] dan standar oleh Teknologi Hypertext Aplikasi Web Kelompok Kerja (WHATWG) pada spesifikasi yang diusulkan baru untuk teknologi web generasi berikutnya.[butuh rujukan]
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.[4]Versi lama dari Internet Explorer, versi 8 dan sebelumnya tidak mendukung canvas , namun plugin Google dan Mozilla juga tersedia.[5]
Sebuah gambaran rinci dari canvas support mengenai browser yang paling populer (sebagai persentase dari pangsa pasar per September 2012, diambil dari pangsa browser web)[6]
| 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
- ^ Ian Hixie (2004-07-12). "Extending HTML". Diakses tanggal 2012-12-27.
- ^ Mozilla Developer Connection. "HTMLCanvasElement". Diakses tanggal 2012-12-27.
- ^ Opera 9.0 changelog
- ^ Sucan, Mihai (4 Feb, 2010). "SVG or Canvas? Сhoosing between the two". Opera Software. Diakses tanggal 16 January 2013.
- ^ "Mozilla drags IE into the future with Canvas element plugin". Ars Technica. 19 Aug, 2008. Diakses tanggal 16 January 2013.
- ^ "Compatibility tables for the support of HTML5, CSS3, SVG". Diakses tanggal 16 January 2013.