HTML 5 Canvas

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>

Catatan: Selalu menentukan atribut id (yang akan disebut dalam script), dan lebar dan tinggi atribut untuk menentukan ukuran kanvas.
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)

Untuk benar-benar menggambar lingkaran, kita harus menggunakan salah satu dari metode "ink", seperti stroke () atau fill ().

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();

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);

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);

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);

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);

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);