Radial Gradient pada Canvas (1412)

Jika sebelumnya kita membahas tentang cara membuat radial gradien pada objek di SVG, sekarang kita akan membahas tentang cara membuat radial gradien pada objek di Canvas.

Canvas merupakan elemen dalam HTML5 yang mirip dengan SVG, hanya bedanya adalah jika di SVG, setelah kita menggambar sebuah objek, maka SVG masih dapat memanggil objek tersebut, sedangkan jika di Canvas, setelah kita menggambar objek, Canvas sudah tidak mengingat objek tersebut.

Jika ingin membuat game dan bingung untuk memilih menggunakan Canvas atau SVG, maka lihatlah game seperti apa yang ingin kita buat, jika ingin membuat game yang tidak banyak menggunakan event listener, maka gunakan Canvas, sebaliknya jika ingin membuat game yang menggunakan banyak event listener, maka lebih baik gunakan SVG walaupun hasilnya akan sama saja.

Nah, masuk ke tutorialnya, pertama buat Canvasnya, caranya seperti ini :

Kemudian kita akan membuat objeknya dengan menggunakan javascript, seperti ini :

Dan, hasilnya adalah seperti ini :

Berikut adalah penjelasan scriptnya.

Pada bagian ini, digunakan untuk mengambil canvas yang telah dibuat sebelumnya.

Bagian ini untuk mengambil context dari canvas tersebut.

Dan bagian ini untuk membuat gradiennya, sintaksnya adalah ctx.createRadialGradient(x0,y0,r0,x1,y1,r1); . Parameter angka-angka tersebut adalah x0 = titik x awal lingkaran gradien, y0 = titik y awal lingkaran gradien, r0 = radius awal lingkaran gradien, x1 = titik x akhir lingkaran gradien, y1 = titik y akhir lingkaran gradien, r1 =radius akhir lingkaran gradien.

 

Pada bagian ini, addColorStop digunakan untuk memberi warna gradien.

Bagian ini untuk menambahkan gradien kedalam persegi tersebut.

Demikianlah tutorial membuat radial gradient ke objek Canvas, semoga artikel ini bermanfaat, jika terdapat kesalahan mohon dimaafkan dan dikoreksi. Thanks for reading XOXO.