HTML5 serimize devam ediyoruz.Bu derste daire çizmeyi göreceğiz.Geçen ders arc ile bir yarıçap belirleyip yay yapıyoduk.Yay başlama ve bitiş ucunu birleştirirsek bir daire oluyo.
Yay konusu için :
http://ustaderslik.com/konu/HTML5_Canvas_Ders-5_Yay_%C3%A7izmek_(Arc)
Şimdi kodlara geçelim.Standart olarak canvas alanımızı oluşturarak başlayalım.
<canvas id="canvas" width="600" height="200"></canvas>
Şimdide erişim yapıp kodlarımızı yazalım.
<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 = '#000';
cizim.fill();
</script>
Görüntüsü :
Kodlar geçen derle aynı nerdeyse.Farklı olan kısım startangle yani başlangıç noktası 0 endangle yani bitiş noktası 7.Böylelikle tam bir daire elde ediyoruz.fillstyle ise diğer derslerde anlatmıştık.Arkaplan rengi için.
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(275,100, 50,0,7,false);
cizim.fillStyle = '#f1f1f1';
cizim.fill();
cizim.strokeStyle="#ddd";
cizim.lineWidth=3;
cizim.stroke();
</script>
</body>
</html>
Görüntüsü :
Daire Yapımı bu kadar.
UstaDerslik
