Unsur <canvas> digunakan untuk menggambar grafik, on the fly, pada halaman web.
Contoh sebuah persegi panjang merah, persegi panjang gradien, persegi panjang multicolor, dan beberapa teks multicolor pada kanvas:
Apa Itu Canvas?
Elemen HTML5 <canvas> digunakan untuk menggambar grafik, on the fly, melalui scripting (JavaScript biasanya).
Unsur <canvas> hanya wadah untuk grafis. Anda harus menggunakan script untuk benar-benar menarik grafis.
Kanvas memiliki beberapa metode untuk menggambar jalur, kotak, lingkaran, karakter, dan menambahkan gambar.
Browser Support
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support untuk elemen <canvas>.
Note: Internet Explorer 8 versi terbaru, tidak support untuk <canvas> element.
Membuat Canvas
Kanvas adalah area persegi pada halaman HTML, dan itu ditentukan dengan elemen <canvas>.
Catatan: Secara default, elemen <canvas> tidak memiliki border dan tidak ada konten.
Markup terlihat seperti ini:
<canvas id="myCanvas" width="200" height="100"></canvas>
Tip: Anda dapat memiliki beberapa elemen <canvas> pada satu halaman HTML.
Untuk menambahkan border, gunakan atribut style:
Contoh
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
Menggambar Canvas Dengan JavaScript
Semua gambar di kanvas harus dilakukan di dalam JavaScript:
Contoh
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Canvas Coordinates
Kanvas adalah grid dua dimensi.Sudut kiri atas kanvas memiliki koordinat (0,0)
Jadi, fillRect () metode di atas memiliki parameter (0,0,150,75).
Ini berarti: Mulai di pojok kiri atas (0,0) dan menggambar piksel persegi panjang 150x75.
koordinat Contoh
Mouse di atas persegi panjang di bawah ini untuk melihat nya koordinat x dan y:
X
Y
Canvas - Paths
Untuk menggambar garis lurus di atas kanvas, kita akan menggunakan dua metode berikut:
moveTo (x, y) mendefinisikan titik awal baris
lineto (x, y) mendefinisikan titik akhir baris
Untuk benar-benar menarik garis, kita harus menggunakan salah satu dari "tinta" metode, seperti stroke ().
Contoh
Tentukan titik awal dalam posisi (0,0), dan titik akhir pada posisi (200,100).
Kemudian gunakan stroke () metode untuk benar-benar menarik garis:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Untuk menggambar sebuah lingkaran di atas kanvas, kita akan menggunakan metode berikut:
arc(x, y, r, start, stop)
Contoh
Membuat Lingkaran menggunakan metode arc():
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Canvas - Text
Untuk menggambar teks pada kanvas, properti yang paling penting dan metode adalah:
Font - mendefinisikan properti font untuk teks
fillText (text, x, y) - Menarik "filled" teks pada kanvas
strokeText (text, x, y) - Menarik teks pada kanvas (no fill)
Menggunakan fillText ():
Contoh
Menulis 30px high filled text pada canvas, menggunakan font "Arial":
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
Menggunakan strokeText():
Contoh
Menulis 30px high text (no fill) pada canvas, menggunakan font "Arial":
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
Canvas - Gradients
Gradien dapat digunakan untuk mengisi persegi panjang, lingkaran, garis, teks, dll.
Bentuk pada kanvas tidak terbatas pada warna solid.
Ada dua jenis gradien:
createLinearGradient (x, y, x1, y1) - Menciptakan gradien linier
createRadialGradient (x, y, r, x1, y1, r1) - Membuat gradien radial / melingkar
Setelah kita memiliki objek gradien, kita harus menambahkan dua atau lebih warna stops.
metode addColorStop () menentukan stops warna, dan posisinya di sepanjang gradien. Posisi gradien dapat di mana saja antara 0 sampai dengan 1.
Untuk menggunakan gradien, mengatur properti fillStyle atau strokeStyle untuk gradien, dan kemudian menggambar bentuk, seperti persegi panjang, teks, atau garis.
Menggunakan createLinearGradient ()
Contoh
Membuat linear gradient. Isi persegi panjang dengan gradient:
JavaScript:
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);
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);
Menggunakan createRadialGradient():
Contoh
membuat radial/circular gradient. Isi persegi panjang dengan gradient:
JavaScript:
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);
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);
Canvas - Images
Untuk menggambar image pada canvas, menggunakan metode:
- drawImage(image,x,y)
Image yang digunakan
Contoh
Gambarlah gambar pada canvas seperti ini:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
