Kita tidak usah jadi pengendali udara, pengendali air atau pengendali api. Kita cukup jadi pengendali hati saja.
Itu sudah cukup sakti. Oke kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Linear Gradient dengan Canvas.
Linear Gradient adalah gradient yang berbentuk horizontal atau vertikal. Nah pada tutorial kali ini kita akan memberikan linear gradient pada canvas tersebut. Oke langsung saja, berikut Cara Membuat Linear Gradient dengan Canvas.
Seperti biasa, siapkan file index.html nya.
Kemudian, isi di bagian <body> tag Canvas berikut.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas>
Dan setelah itu, isi untuk Javascript nya.
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
Bagaimana teman-teman? Cukup mudah bukan?
Sekian untuk tutorial kali ini tentang bagaimana Cara Membuat Linear Gradient dengan Canvas.
Semoga bermanfaat, terima kasih