HTML5 Canvas Ders-5 Yay çizmek (Arc)
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-5 Yay çizmek (Arc)

profil
cArleone
BEĞEN(3)
BEĞENME(0)
GÖRÜNTÜLENME(2515)
RAPOR ET
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.
http://ustaderslik.com/resim/ders/t94ul.png

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.
http://ustaderslik.com/resim/ders/t9502.png
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 :
http://ustaderslik.com/resim/ders/t9543.png



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