Html5 derslerimize devam ediyoruz.Bu derste objelere ve metinlere gölge vermeyi göreceğiz.Öncelikle kullanacağımız kodları açıklayarak başlayalım.
cizim.shadowColor='#d12c69';
cizim.shadowBlur=10;
cizim.shadowOffsetX=5;
cizim.shadowOffsetY=5;
Gölge için 4 tane kodumuz mevcut.
shadowColor : Gölge rengini belirliyor.
shadowBlur : Gölgenin bulanıklığını ayarlıyor.
shadowOffsetX : X eksendeki gölge pozisyonu.+ değer sağa - değer sola kaydırır.
shadowOffsetY : Yeksendeki gölge pozisyonu.+ değer aşağı - değer ise yukarı kaydırıyor.
Gölge kodlarını yazdığınızda altaki tüm objeleri etkiler.Değişiklik yapmak istediğiniz objeden önce tekrar shadow kodlarını yazarak yapabilirsiniz.iptal etmek için
cizim.shadowColor='none';
diyin.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
#canvas{border:2px solid #333;}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var cizim = canvas.getContext('2d');
cizim.shadowColor='#d12c69';
cizim.shadowBlur=10;
cizim.shadowOffsetX=5;
cizim.shadowOffsetY=5;
cizim.beginPath();
cizim.rect(200,40, 200, 100);
cizim.fillStyle = '#ddd';
cizim.fill();
cizim.shadowColor='yellow';
cizim.shadowBlur=1;
cizim.font = 'normal 20pt Arial';
cizim.textAlign='center';
cizim.fillStyle='#000';
cizim.fillText('UstaDerslik',300,100);
</script>
</body>
</html>
Görüntüsü :
Önce bir gölge ayarı yaptık sonra bir dikdörtgen çizdirttik.Ardından renk ve blur ayarlarını değiştirdik ve bir metin bastırdık.
UstaDerslik
