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.
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ü :
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.