HTML <canvas> elemen digunakan untuk menggambar grafik pada halaman web.
Grafik ke kiri dibuat dengan <canvas> . Ini menunjukkan empat unsur: persegi panjang merah, persegi panjang gradien, persegi panjang multicolor, dan teks multicolor.
Apa itu HTML Canvas ?
HTML <canvas> elemen digunakan untuk menggambar grafik, dengan cepat, melalui scripting (usually JavaScript) .
The <canvas> elemen hanya wadah untuk grafis. Anda harus menggunakan script untuk benar-benar menarik grafis.
Canvas memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, teks, dan menambahkan gambar.
Unsur kanvas merupakan bagian dari HTML5 dan memungkinkan untuk dinamis, render scriptable bentuk 2D dan gambar bitmap. Ini adalah tingkat rendah, Model prosedural yang update bitmap dan tidak memiliki grafik adegan built-in.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh <canvas> elemen.
| Elemen | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Sejarah
Kanvas awalnya diperkenalkan oleh Apple untuk digunakan di dalam Mac OS X komponen WebKit mereka sendiri pada tahun 2004 aplikasi powering seperti widget Dashboard dan browser Safari.
Kemudian, pada tahun 2005 itu diadopsi dalam versi 1.8 dari Gecko browser, dan Opera pada tahun 2006, dan distandarisasi oleh Aplikasi Grup Web Hypertext Teknologi Kerja (WHATWG) spesifikasi yang diusulkan baru untuk teknologi web generasi berikutnya.
Pemakaian
Kanvas terdiri dari wilayah ditarik didefinisikan dalam kode HTML dengan atribut tinggi dan lebar. kode JavaScript dapat mengakses daerah melalui set lengkap fungsi gambar mirip dengan API 2D umum lainnya, sehingga memungkinkan untuk grafis yang dihasilkan secara dinamis.
Beberapa penggunaan diantisipasi kanvas mencakup grafik bangunan, animasi, game, dan komposisi gambar.
Canvas Contoh
Sebuah canvas merupakan daerah persegi panjang pada halaman HTML. Secara default, canvas tidak memiliki perbatasan dan tidak ada konten.
markup terlihat seperti ini:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Selalu menentukan atribut id (to be referred to in a script) , dan lebar dan tinggi atribut untuk menentukan ukuran canvas .
Untuk menambahkan perbatasan, gunakan style atribut:
Dasar Canvas Contoh
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas> Cobalah sendiri " Menggambar dengan JavaScript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75); Cobalah sendiri " Menarik garis
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); Cobalah sendiri " Menggambar Lingkaran
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); Cobalah sendiri " Menggambar Teks
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); Cobalah sendiri " Stroke Teks
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); Cobalah sendiri " Menggambar Linear Gradient
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); Cobalah sendiri " Menggambar Edaran Gradient
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); Cobalah sendiri " menggambar Gambar
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10); Cobalah sendiri " HTML Canvas Tutorial
Untuk mempelajari semua tentang HTML <canvas> , Kunjungi kami penuh HTML Canvas Tutorial .