HTML5 Canvas Ders-12 translate() 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-12 translate() Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1981)
RAPOR ET
HTML5 canvas derslerimize devam ediyoruz.Bu derste translate fonksiyonunu işleyeceğiz.Öncelikle işlevinden başlayayım.Translate canvas içindeki çizim başlama alanını değiştirmemize yarar.Resimli anlatayım daha iyi anlarsınız.

http://ustaderslik.com/resim/ders/7gf7es54df4.gif

Saydan olmayan tuvalimizin ilk hali.Translate ile 2 konuma getirip çizimlere devam edebiliriz.Resimdeki kutu ilk resimde 0,0 ise 2 cide de 0,0 pozisyonundadır.Biz sadece başlama noktasının yerini değiştiriyoruz.

translate(x,y);


Kodumuz bu şekilde.X ve Y vererek başlama noktasını değiştiriyoruz.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
#canvas{border:2px solid #DDD;}
</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.rect(10, 10, 120, 50);
cizim.fillStyle = '#666666';
cizim.fill();

cizim.translate(0,100);

cizim.beginPath();
cizim.rect(10, 10, 120, 50);
cizim.fillStyle = '#666666';
cizim.fill();

</script>

</body>
</html>

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

Yukarıdaki örnekte aynı koordinatlarda 2 kutu çizdirdim ama 2 alta.Nedeni 2 kutudan önce translate ile başlama konumunu 0,100 yaptım yani 100px aşağı kaydırdım.Translate yi silerseniz 2 kutu üst üste gelip sadece üsteki gözüküyor olacaktı.

Peki bunu nerde kullanırız derseniz benim aklıma gelen şu:Diyelimki oyun yapıyoruz.Karekter sağa gidiyorsa Odanın başlama pozisyonu x ekseninde - yöne alarak odanın ilerlemesini sağlayabiliriz.



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