Model Kubus Atraktif Menggunakan Canvas HTML5

Berikut ini adalah tutorial bagaimana membuat sebuah kubus 3 Dimensi yang atraktif. Seperti pada pemodelan menggunakan delphi pada Model Kubus Atraktif Menggunakan Delphi, namun model kali ini menggunakan bahasa pemrograman Javascript pada Canvas HTML5. Pemodelan ini menggunakan matematika geometri melalui metode vektor dan matriks. Kubus atraktif menggunakan matriks rotasi seperti pada gambar berikut

Kubus akan berrotasi mengikuti mouse, hal ini karena menggunakan event onmousemove, script dan hasilnya terlihat seperti berikut:

Contoh bagaimana mewarnai objeck sederhana

Berikut di bawah ini adalah penjelasan bagaimana mengisi warna pada objeck sederhana. Dimulai dari satu warna sampai pembuatan gradient hanya menggunakan method dan property khusus untuk Canvas HTML5.

1. fill

   
   
   Method fill() adalah fungsi yang memeritahkan untuk menisi object berupa lingkaran, persegi atau poligon. Method ini memerlukan sebuah property yang lain yaitu fillStyle yang bernilai warna. Berbeda dengan property strokeStyle yang berfungsi untuk mewarna stroke atau garis.
   
   

Contoh Membuat Bidang 2 Dimensi Pada Canvas HTML5

Beberapa contoh berikut adalah penjelasan bagaimana membuat bidang 2 dimensi berupa kotak, lingkaran, poligon. Contoh-contoh tersebut merupakan teknik dasar dalam membuat grafik.

Kotak

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

Cara Memberi Gaya Sudut Antar Garis

Untuk memberi gaya pada sudut antara garis maka diperlukan sebuah properti pada javascript yaitu lineJoin, dengan nilai miter, bevel, dan round, nilai default adalah miter. yang masing-masing akan terlihat perbedaanya pada contoh dibawah.

Contoh sedarhana cara membuat garis di HTML5

Berikut ini adalah contoh cara membuat garis pada canvas di HTML5. Yang diperlukan untuk menggambar garis di canvas adalah beginPath (), MoveTo (), LineTo (), dan stroke () yang diimplementasikan dengan bantuan javascript.

Pada tag <script> kita menuliskan javascript untuk menggambar garis pada canvas, kita membutuhkan metode beginPath () untuk menyatakan bahwa kita akan menggambar, kemudian menggunakan metode MoveTo (x,y) untuk menentukan posisi titik awal garis dibentuk, dan kemudian menggunakan metode LineTo (x,y) untuk menentukan posisi akhir dari sebuah garis. Kemudian agar garis yang dibuat bisa terlihat, membutuhkan satu metode lagi yaitu stroke ().