HTML5 Canvas Ders-21 Eğri çizmek - bezierCurveTo()
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-21 Eğri çizmek - bezierCurveTo()

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3149)
RAPOR ET
Html5 canvas serimize devam ediyoruz.Bu derste bezierCurveTo() kullanımını anlatacağım.BezierCurveTo eğri çizmemizi sağlıyor.

bezierCurveTo(cap1x,cap1y,cap2x,cap2y,bitisx,bitisy)

Parametreleri bunlar.Öncelikle moveTo ile bir başlama nosktası belirliyoruz.Sonra eğrilerin geçeceği 2 nokta belirliyoruz ve bitiş koordinatlarını giriyoruz.Eğrinin geçeceği koordinatlardan direk eğri geçmiyor.Belirlediğimiz eğrinin tam ortasında geçecek şekilde oval şekilde geçiyor.Örneği incelerken daha iyi anlarsınız.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
var canvas = document.getElementById('canvas'),
cizim= canvas.getContext('2d');//canvas bağlantısı

cizim.beginPath();
cizim.moveTo(0,0);//başlama noktası
cizim.bezierCurveTo(100,200,300,200,400,0);//bir eğri çiziyoruz
cizim.lineWidth =5;//çizgi kalınlığı
cizim.strokeStyle ="#d12c69";//çizgi rengi
cizim.stroke();//çiz
})
</script>
<style type="text/css">
canvas{border:1px solid #ddd;}
</style>
</head>
<body>

<canvas id="canvas" width="400" height="200"></canvas>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/f4ge7r7r.png

Yukarıda ne yaptık bakalım.0,0 dan çizimi başlattık.Daha sonra 100,200 ile 300,200 arası eğrinin geçeceği yer dedik.Buda canvasımızın ortası olan 200 dü.Bitiş noktasıda 400,0 dedik ve eğrimizi çizdirttik.



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