HTML5 Canvas Ders-15 Shadow Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

HTML5 Canvas Ders-15 Shadow Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1803)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/8bn8b788.png
Ö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.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol