Canvas yang ada di HTML bisa dibilang sebagai fitur untuk menggambar langsung pada Website. Dalam kesempatan ini saya akan membahas mengenai cara membuat shadow dengan canvas HTML. Baiklah langsung saja buat struktur HTML untuk membuat efek shadow dengan canvas HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Membuat Shadow Di Canvas HTML</title>
<style>
#Box{width: 50%;height: 80vh;border:1px solid; }
</style>
</head>
<body>
<canvas id="Box"> Apapun didalamnya tag <!-- <canvas> --> tidak akan ditampilkan pada Browser</canvas>
<script>
var cvs = document.getElementById('Box');
var ktk = cvs.getContext('2d');
cvs.width = cvs.scrollWidth;
cvs.height = cvs.scrollHeight;
ktk.shadowColor="red";
ktk.shadowOffsetX=-10;
ktk.shadowOffsetY=10;
ktk.shadowBlur=10;
ktk.fillStyle="aqua"; // style warna
ktk.fillRect(200,100,250,250); // (posX,posY,width,height)
</script>
</body>
</html>
Pada tag <canvas> saya memberikan style width,height dan border sebagai area canvasnya. Lalu pada scriptnya
- shadowColor => value warna
- shadowOffsetX => value positif atau value negatif (posisi bayangan kanan-kiri)
- shadowOffsetY => value positif atau value negatif (posisi bayangan atas-bawah)
- shadowBlur => value positif
Setelah itu simpan kemudian buka pada browser masing-masing, sehingga akan seperti tampilan berikut ini:
Saya kira cukup pembahasan kali ini Cara Membuat Shadow Di Canvas HTML, semoga bermanfaat dan sampai jumpa dengan pembasan lainnya.
terima kasih.
The post Cara Membuat Shadow Dengan Canvas HTML appeared first on Kursus Website Terbaik.