Cara Membuat Linear Gradient dengan Canvas

Kita tak usah jadi pengendali udara, pengendali air atau pengendali api. Kita lumayan jadi pengendali hati saja.


Itu telah lumayan sakti. Oke kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Merancang Linear Gradient dengan Canvas.



Linear Gradient ialah gradient yang berbentuk horizontal atau vertikal. Nah di panduan kali ini kita akan memberikan linear gradient di canvas tersebut. Oke seketika saja, berikut Cara Merancang Linear Gradient dengan Canvas.



Seperti lazim, 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 bagi 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? Lumayan gampang bukan?



Sekianlah bagi panduan kali ini mengenai bagaimana Cara Merancang Linear Gradient dengan Canvas.



Semoga bermanfaat, terima kasih




Sumber https://kursuswebsite.org

Popular posts from this blog

Cara Menghapus Isi Dari Form Input Menggunakan Javascript

Membuat Form Menarik Menggunakan HTML dan CSS