HTML5 canvas derslerimize devam ediyoruz.Bu derste
rotate() fonksiyonumuzu işleyeceğiz.İşlevinden başlayalım.Rotote ile canvas yani tuvalimizi döndürüyoruz.Aşağıda örnek yaptığımızda daha iyi anlarsınız.
rotate(açı);
Kullanımı bu şekilde.Değer olarak açı alıyor.0.02=1 derece oluyor.Direk derece girmek isterseniz.
rotate(derece*Math.PI/180);
Şeklinde derece olarak değer girebilirsiniz.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
</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(0,0,canvas.width,canvas.height);
cizim.fillStyle = '#dddddd';
cizim.fill();
cizim.rotate(5*Math.PI/180);
cizim.beginPath();
cizim.rect(0,0,canvas.width,canvas.height);
cizim.fillStyle = '#666666';
cizim.fill();
</script>
</body>
</html>
Görüntüsü :
Ekrana 2 tane tuval büyüklüğünde dikdörtgen çizdirdik.Ama 2 cisi dönmüş şekilde.Çünkü 2.den önce
cizim.rotate(5*Math.PI/180);
diyerek tuvali 5 derece döndür dedik.Kullanımı bu kadar basit.
UstaDerslik
