Canvas Tutorial

Canvas Tutorial

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?

Pasti ada yang belum tau apa itu html canvas,di sini saya akan memberikan materi tentang html canvas

HTML <canvas> elemen digunakan untuk menggambar grafik, dengan cepat, melalui scripting (JavaScript biasanya).

The <canvas> elemen hanya wadah untuk grafis. Anda harus menggunakan script untuk benar-benar menarik grafis.

Kanvas memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, teks, dan menambahkan gambar.

 Saya akan memberikan contoh-contoh sederhana menggambar pada canvas dengan Javascript:

Menggambar pada kanvas Dengan JavaScript

Semua menggambar pada kanvas HTML harus dilakukan dengan JavaScript:

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Langkah 1: Cari kanvas Element

Pertama-tama, Anda harus menemukan <canvas> elemen.

Hal ini dilakukan dengan menggunakan metode HTML DOM getElementById ():

var canvas = document.getElementById("myCanvas");

Langkah 2: Buat objek Menggambar

Kedua, Anda membutuhkan objek gambar untuk kanvas.

GetContext () adalah objek HTML built-in, dengan sifat dan metode untuk menggambar

var ctx = canvas.getContext("2d");

Langkah 3: Menggambar di Canvas

Akhirnya, Anda dapat menggambar pada kanvas.

Mengatur gaya mengisi dari objek gambar untuk warna merah:

ctx.fillStyle = "#FF0000";

Properti fillStyle bisa menjadi warna CSS, gradien, atau pola. Default fillStyle hitam.

The fillRect (x, y, lebar, tinggi) metode menggambar persegi panjang, penuh dengan gaya mengisi, di kanvas:

ctx.fillRect(0,0,150,75);

Dan hasilnya seperti ini:

 

Dan saya akan memberikan contoh lain dari html Canvas:

Kanvas Koordinat

HTML kanvas adalah grid dua dimensi.

Sudut kiri atas kanvas memiliki koordinat (0,0)

Pada bab sebelumnya, Anda melihat metode ini digunakan: fillRect (0,0,150,75).

Ini berarti: Mulai di sudut kiri atas (0,0) dan menggambar persegi panjang 150x75 piksel

Koordinat Contoh

Mouse persegi panjang di bawah ini untuk melihat x dan y koordinat:

  X

Y

Menggambar Line

Untuk menggambar garis lurus di kanvas, gunakan metode berikut:

• moveTo (x, y) - mendefinisikan titik awal dari garis
• lineTo (x, y) - mendefinisikan titik akhir dari garis

Untuk benar-benar menarik garis, Anda harus menggunakan salah satu "tinta" metode, seperti stroke ().

Contoh:

 

Tentukan titik awal di posisi (0,0), dan titik akhir di posisi (200.100).Kemudian gunakan metode stroke () untuk benar-benar menarik garis:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Menggambar Lingkaran

Untuk menggambar sebuah lingkaran di atas kanvas, gunakan metode berikut:

• beginPath ();
• arc (x, y, r, start, stop)

Contoh:

 

 

Mendefinisikan lingkaran dengan metode busur (). Kemudian gunakan metode stroke () untuk benar-benar menarik lingkaran:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Canvas - Gradien

Gradien dapat digunakan untuk mengisi persegi panjang, lingkaran, garis, teks, dll Bentuk di kanvas tidak terbatas pada warna solid.

Ada dua jenis yang berbeda dari gradien:

• createLinearGradient (x, y, x1, y1) - menciptakan gradien linier
• createRadialGradient (x, y, r, x1, y1, r1) - menciptakan radial / melingkar gradien

Setelah kita memiliki objek gradien, kita harus menambahkan dua atau lebih berhenti warna.

The addColorStop () metode menentukan berhenti warna, dan posisinya di sepanjang gradien. Posisi gradien dapat di mana saja antara 0 hingga 1.

Untuk menggunakan gradien, mengatur properti fillStyle atau strokeStyle untuk gradien, kemudian menggambar bentuk (persegi panjang, teks, atau garis).

Menggunakan createLinearGradient ()

Contoh:

Buat gradient linier.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:

Buat radial / melingkar gradien. Isi persegi panjang dengan gradien:

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

Menggambar teks pada kanvas

Untuk menggambar teks pada kanvas, properti yang paling penting dan metode adalah:

• Font - mendefinisikan sifat font untuk teks
• fillText (teks, x, y) - menarik "diisi" teks pada kanvas
• strokeText (teks, x, y) - menarik teks pada kanvas (tidak ada isi)

Menggunakan fillText ()

Contoh:

Mengatur font untuk 30px “Arial” dan menulis text penuh di kanvas:

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

Menggunakan strokeText ()

Contoh

Mengatur font untuk 30px "Arial" dan menulis teks, tanpa mengisi, di kanvas:

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);

Tambahkan warna dan Pusat Teks

Contoh:

Mengatur font untuk 30px "Comic Sans MS" dan menulis teks merah diisi di tengah kanvas:

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2); 

HTML Canvas Images

Canvas - Images

Untuk menggambar gambar di kanvas, menggunakan metode berikut:

• drawImage (gambar, x, y)

Contoh:

                                   

<html>

<body>

<p>Image to use:</p>

<img id="scream" width="220" height="277"

src="pic_the_scream.jpg" alt="The Scream">

<p>Canvas:</p>

<canvas id="myCanvas" width="240" height="297"

style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

window.onload = function() {

    var canvas = document.getElementById("myCanvas");

    var ctx = canvas.getContext("2d");

    var img = document.getElementById("scream");

   ctx.drawImage(img, 10, 10);

}

</script>

</body>

</html>          

Demikian Tutorial dari kami Membuat html Canvas semoga bermaanfaat ^_^