HTML5 Canvas Ders-6 Daire Yapımı
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-6 Daire Yapımı

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

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ü :
http://ustaderslik.com/resim/ders/tdf2r.png
Daire Yapımı bu kadar.



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