Membuat Gradiasi Canvas HTML5

Dalam menerapkan warna objek terdapat dua jenis yaitu Linear Gradient dan Radial Gradient. Linear Gradient adalah gradiasi yang berbentuk lurus dan dapat di buat dengan perintah createLinearGradient() sedangkan Radial Gradients merupakan gradiasi yang berbentuk melingkar yang dibuat dengan menggunakan perintah createRadialGradient(). Gradien dapat kita digunakan untuk mengisi warna pada persegi panjang, lingkaran, garis, dan teks.
Pada kesempatan kali ini saya akan menciptakan sebuah linier gradien dengan html5 kanvas. Langsung saja Pertama kita buat elemen canvas terlebih dahulu dan berikan lebar dan tinggi sebagai berikut

Untuk menambahkan warna dalam gradasi, kita dapat melakukan perintah addColorStop() .

Agar lebih jelasnya, cobalah ketikkan script dibawah ini.

Hasilnya sebagai berikut

Jadi warna pada kanvas tidak terbatas pada warna solid tetapi kita juga dapat menggunakan dua warna sekaligus, saya sudah memberikan warna biru muda yang berasal dari titik awal dan biru gelap berasal dari titik akhir.

Semoga Bermanfaat..

27 April 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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat