HTML Canvas Menggambar

Pelajari Tutorial Canvas HTML Lainya Disini 01. HTML5 Canvas 02. HTML Canvas Menggambar 03. HTML Canvas Koordinat 04. HTML Canvas Gradien 05. Html Canvas Text dan Image

Menggambar pada kanvas Dengan JavaScript

Semua gambar pada kanvas HTML harus dilakukan dengan JavaScript:

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

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

ctx.fillStyle = "red";

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

Langkah 1: Cari Canvas Element

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

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

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

Langkah 2: Buat objek Menggambar

Kedua, Anda memerlukan objek gambar untuk kanvas.

The 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 objek gambar untuk warna merah:

ctx.fillStyle = "red";

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

Kembali Keatas ⇑

CB Blogger