HTML5 kanvas : BAB 7

Apa kanvas?

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


Unsur <canvas> hanya wadah untuk grafis, Anda harus menggunakan script untuk benar-benar menarik grafis.


Kanvas adalah wilayah ditarik didefinisikan dalam kode HTML dengan atribut tinggi dan lebar.


Kanvas memiliki beberapa metode untuk path gambar, kotak, lingkaran, karakter, dan gambar menambahkan.

---

Buat kanvas

Sebuah kanvas ditentukan dengan elemen <canvas>.


Tentukan id, lebar, dan tinggi dari elemen <canvas>:

 

<canvas id="myCanvas" width="200" height="100"></canvas>

---

Menggambar Dengan JavaScript

Unsur <canvas> tidak memiliki kemampuan menggambar sendiri.


Semua gambar harus dilakukan di dalam JavaScript:

 

<script type="text/javascript">

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

 

JavaScript menggunakan id untuk menemukan elemen <canvas>:

 

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

Kemudian, membuat objek konteks:

 

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

Para getContext ("2d") objek adalah built-in HTML5 objek, dengan banyak metode untuk menggambar jalan, kotak, lingkaran, karakter, gambar dan banyak lagi.


Dua baris berikutnya menggambar persegi panjang merah:

 

ctx.fillStyle="#FF0000";

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

Atribut fillStyle membuatnya merah, dan atribut fillRect menentukan bentuk, posisi, dan ukuran.