Beragam Macam Gradient With HTML5

Sebenarnya tujuan saya agar memahami satu persatu jika saya memposting keseluruhan maka itu akan membingungkan, tapi tak apalah saya akan posting secara keseluruhan, jarang sekali saya mencantumkan nama ataupun link, karena secara jujur saya tau siapa yang benar-benar belajar, siapa yang hanya menyimak, siapa yang berusaha mencoba, siapa yang kopas dan siapa yang hanya sekedar membalas komentar, terima kasih sebelumnya buat sobat rachmath atas sarannya "top abis langsung di posting nih".
Namun sebelumnya kita harus benar benar bisa memahami dan membedakan apa itu radial gradient dan linear gradient. Oke, sebelum mulai siapin kopi, roko sama pisang goreng biar pembahasan ini bisa di bawa santai soalnya kalu ga santai bisa bikin mumet.
Sebenarnya ada tiga metode yang harus kita ketahui yaitu linear dan radial, yang seperti pernah saya lihat ada tutorial tentang gradient tapi apakah dalam kode tersebut kita tau bahwa itu radial atau linear? coba perhatikan paparan berikut: addColorStop(offset, warna)

Fungsi ini adalah untuk memberikan warna sesuai urutan atau sesuai bidang, dengan kata lain kita bisa menentukan dimana warna akan di mulai dan dimana pula warna akan berakhir.

g.addColorStop(0, '#000');
g.addColorStop(1 / 8, '#00f');
g.addColorStop(2 / 8, '#0f0');
g.addColorStop(3 / 8, '#0ff');
g.addColorStop(4 / 8, '#f00');
g.addColorStop(5 / 8, '#f0f');
g.addColorStop(6 / 8, '#ff0');
g.addColorStop(7 / 8, '#f03');
g.addColorStop(1, '#eee');

Seperti yang terlihat dalam kode saya memulainya dengan g.addColorStop(0, '#000'); itu adalah warna hitam dan saya mengakhirinya dengan g.addColorStop(1, '#eee'); createLinearGradient (x0, y0, x1, y1)

Fungsi dari metode ini adalah membentuk garis warna dengan 4 coordinate yang dimana kita memulainya, coba tebak di mana memulainya? heheh, becanda sob, oke begini seperti titik diatas adalah x0, y0, x1, y1 itu berarti kita memulai membuat garis dari coordinate (x0,y0) kemudian ke (x1,y1) dan itu berakhir That's it. Jika sobat meneruskan silahkan di teruskan coordinate nya. createRadialGradient(x0, y0, r0, x1, y1, r1)

Nah! lu, nah lu, sekarang agak pucing dikit. Metode ini adalah radial yang di mana kita menambahkan jari-jari lingkaran yaitu r ada yang masih ingat pelajaran sekolah dasar tentang cara menghitung luas lingkaran? itu sama saja tapi kita tidak menghitung luas hanya memberikan jari-jari yang dimana fungsi r untuk memberikan warna di antara lingkaran satu dengan lingkaran yang berikutnya.

Sekarang saya akan memberikan contoh macam-macam Gradient berikut kodenya yang bisa sobat masukan dalam postingan.

HTML5 Canvas Gradient Linear Horizontal

KODE :

<canvas id="horizontal" width="400" height="300"></canvas>
<script type="text/javascript">
var c=document.getElementById("horizontal");
var cxt=c.getContext("2d");
var gradient = cxt.createLinearGradient(0,0,400,0)
gradient.addColorStop(0,'magenta');
gradient.addColorStop(.5,'Yellow');
gradient.addColorStop(.6,'red');
gradient.addColorStop(1,'Green');
cxt.fillStyle = gradient;
cxt.fillRect(0,0,400,300);
</script>

HTML5 Canvas Gradient Linear Vertical

KODE :

<canvas id="vertical" width="400" height="300"></canvas>
<script type="text/javascript">
var coba=document.getElementById("vertical");
var cxt=coba.getContext("2d");
var gradient = cxt.createLinearGradient(0,0,0,300)
gradient.addColorStop(0,'Red');
gradient.addColorStop(.5,'Yellow');
gradient.addColorStop(0,'blue');
gradient.addColorStop(1,'magenta');
gradient.addColorStop(1,'Green');
cxt.fillStyle = gradient;
cxt.fillRect(0,0,400,300);
</script>

HTML5 Canvas Linear Gradient Diagonal

<canvas height="300" id="sarah" width="400"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('sarah').getContext('2d');
var g = ctx.createLinearGradient(0, 0, 400, 300);
g.addColorStop(0, '#000');
g.addColorStop(1 / 8, '#00f');
g.addColorStop(2 / 8, '#0f0');
g.addColorStop(3 / 8, '#0ff');
g.addColorStop(4 / 8, '#f00');
g.addColorStop(5 / 8, '#f0f');
g.addColorStop(6 / 8, '#ff0');
g.addColorStop(7 / 8, '#f03');
g.addColorStop(1, '#eee');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 400, 300);
</script>

HTML5 Canvas Gradient Radial

Seperti bulatan matahari, yang warnanya saling mengisi jika sobat berkenan dan ingin memodifikasinya silahkan ambil kode di bawah.

KODE :

<canvas height="300" id="myCanvas" width="400"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
var gradient = cxt.createRadialGradient(200, 150, 20, 200, 150, 150)
gradient.addColorStop(0, '#FF0000');
gradient.addColorStop(.6, '#FFFF00');
gradient.addColorStop(1, '#B0E2FF');
gradient.addColorStop(.5, '#F5F5F5');
cxt.fillStyle = gradient;
cxt.fillRect(0, 0, 400, 300);
</script>

Nah...gimana sob pusing kan? itulah sebabnya saya mempostingnya secara perlahan dan satu persatu, saya tidak memposting seperti tutorial yang lainnya yang saya borong. Karena HTML5 canvas yang di butuhkan adalah mengetikan kode bukan di KOPAS! karena percuma kalu di kopas karena saya akan jamin sobat ga akan mengerti bagaimana HTML5 canvas itu bekerja. Yups! segitu aja dulu, Semoga bermanfaat, jangan lupa sedot dulu kopinye gan ntar keburu dingin, hehehe
Please rate this article: