HTML5 Canvas Ders-2 çizgi çizmek (lineTo)
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-2 çizgi çizmek (lineTo)

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(3557)
RAPOR ET
HTML5 canvas serimize devam ediyoruz.Bu derste artık tuvalimize bir şeyler çizmeye başlayacaz.

İlk olarak çizgi çizerek başlayacaz.Şimdi hemen tuvalimizi oluşturalım.
<canvas id="canvas" width="600" height="200"></canvas>


Şimdi de hemen ardına script taglarımızı açıp bunda 2d çizim yapacağımızı belirtelim ve çizgimizi çizelim.
<script type="text/javascript">

var canvas = document.getElementById('canvas');
var cizim = canvas.getContext('2d');
cizim.beginPath();
cizim.moveTo(0,0);
cizim.lineTo(300,100);
cizim.stroke();

</script>


İlk 2 kodu diğer dersten biliyonuz getElementById ile erişip getContext ile 2d çizim yapacaz diyoruz.Diğer kodları anlatmaya başlayalım.
beginPath ile çizim yapmaya başlıyoz diyoz.
moveTo ile çizginin başlama koordinatlarını giriyoruz.Sol en üst köşe (0,0) dır.ilk parametre x ekseni diğeri y eksenidir.
lineTo ile çizgiyi hangi koordinata doğru çizeceğini belirtik.
stroke ile çizime kalınlık verdik.

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

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.moveTo(0,0);
cizim.lineTo(300,100);
cizim.stroke();

cizim.beginPath();
cizim.moveTo(0,30);
cizim.lineTo(300,100);
cizim.stroke();

cizim.beginPath();
cizim.moveTo(0,60);
cizim.lineTo(300,100);
cizim.stroke();
</script>

</body>
</html>


Görüntüsü :
http://ustaderslik.com/resim/ders/szk3f.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