tutorial pengembangan web terbaru
 

HTML Canvas Menggambar


Menggambar pada kanvas Dengan JavaScript

Semua menggambar pada kanvas HTML harus dilakukan dengan JavaScript:

Contoh

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

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 Drawing

Kedua, Anda perlu objek gambar untuk kanvas.

The getContext() adalah built-in objek HTML, dengan sifat dan metode untuk menggambar:

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

Langkah 3: Menggambar di Canvas

Akhirnya, Anda dapat menarik 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,width,height ) metode menarik persegi panjang, penuh dengan gaya mengisi, di kanvas:

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