Mengenal Method Rect Canvas HTML5

Pertemuan kali ini saya akan membahas bagaimana cara membuat beberapa contoh dalam membentuk bidang 2 dimensi berupa kotak, lingkaran, poligon pada canvas HTML5. Contoh-contoh tersebut merupakan teknik dasar dalam membuat objek. Oke kita mulai membuat yang pertama buat sebuah elemen canvas sebagai berikut

Untuk membuat sebuah kotak kita hanya membutuhkan method rect(x, y, width, height) perhatikan perintah berikut untuk menampilkan garis pinggir kotak maka diperlukan stroke():

dan jika perintah tersebut dijalankan akan terbentuk objek kotak dengan garis merah sebagai berikut

Pada method rect parameter pertama dan kedua memposisi kan kotak dengan titik x = 10 dan y = 0 sedangkan parameter tiga dan empat menentukan lebar dan tinggi pada kotak. Pada method rect dan stroke bisa digantikan dengan sebuah method strokeRect(x, y, width, height). Perhatikan perintah tersebut.

Selain rect bisa pula menggunakan method fillRect(x, y, width, height) dengan default warnanya hitam. Untuk mengisi warna pada objek dan ditambahkan property fillStyle.

maka akan terlihat seperti berikut

Semoga Bermanfaat

1 November 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat