HTML5 Canvas Ders-16 GlobalAlpha 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-16 GlobalAlpha Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1679)
RAPOR ET
HTML5 derslerimize devam ediyoruz.Bu derste objenin opaklığını azaltan globalAlpha kodunu işleyeceğiz.GlobalAlpha uygulandıktan sonra kendinden sonra gelen tüm objelere etki eder.Etkisini kapatmak için 1 değeri vererek yapabilirsiniz.Şimdi bir örnek yapalım.

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.beginPath();
cizim.arc(275,100, 50,0,7,false);
cizim.fillStyle = 'red';
cizim.fill();

cizim.globalAlpha=0.3;

cizim.beginPath();
cizim.arc(225,100, 50,0,7,false);
cizim.fillStyle = '#000';
cizim.fill();

</script>

</body>
</html>


Görüntüsü :
http://ustaderslik.com/resim/ders/7fe84sd8.png

Ne yaptık ona bakalım.Öncelikle sayfaya 2 tane daire çizdirttik.Sonra siyah olan objeden önce
cizim.globalAlpha=0.3;

yazarak siyah olan dairenin opaklığını düşürdük.Sonuç bu şekilde oldu.Ama alta başka objeler çizdirirsek onlarada etki edecektir.Siyah daireden hemen sonra
cizim.globalAlpha=1

yazarak normal hale getirebilirsiniz.GlobalAlpha 0-1 arası değer alıyor.1 normal hali oluyor



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