HTML5 eğitim serimize devam ediyoruz.Bu derste yay yapımını göreceğiz.
Yay çizmek için kodumuz
arc(x,y,radius,startangle,endangle,anticlockwise).Parametrelerine göz atalım.
x,y=Başlama koordinatı.
radius=Oluşacak yayın yarı çapı.
startangle=Başlama açısı.
endangle=Bitiş açısı.
anticlockwise=Yönü.false verirsek saat yönünde true saat yönü tersine döndürür.
Kodlara geçelim.Öncelikle tuval alanımızı yaratalım.
<canvas id="canvas" width="600" height="200"></canvas>
Şimdide çizime başlayalım.
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var cizim = canvas.getContext('2d');
cizim.beginPath();
cizim.arc(300,75, 50,3,0,false);
cizim.lineWidth = 1;
cizim.strokeStyle = 'black';
cizim.stroke();
</script>
Bunun görüntüsü şu olacaktır.
Gördüğünüz gibi 3 noktası olan soldan başlayıp 0 noktası olan sağda bitti ve 50px yarı çapında bir yay oluştu.
Arc dışındali kodları diğer derslerde anlattım.Onun için onlara değinmeyecem.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>cArleone</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(150,75, 50,3,0,false);
cizim.lineWidth = 1;
cizim.strokeStyle = 'black';
cizim.stroke();
cizim.beginPath();
cizim.arc(350,100,75,3,0,true);
cizim.lineWidth = 1;
cizim.strokeStyle = '#666';
cizim.stroke();
</script>
</body>
</html>
Görüntüsü şöyle olacaktır :
UstaDerslik
