HTML5 Canvas Ders-3 çizgi Stili
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-3 çizgi Stili

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3007)
RAPOR ET
HTML5 canvas eğitim setimize devam ediyoruz.Bu derste çizginin stilini değiştirecez.Yani kalınlığını,rengini,ovalliğini ayarlayacaz.

Şimdi hemen tuval alanımızı yaratalım.
<canvas id="canvas" width="600" height="200"></canvas>


Kodlarımıza geçelim.
<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.lineWidth=10;
cizim.strokeStyle='#ff0000';
cizim.lineCap='round';
cizim.stroke();
</script>


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

Yularda yeni gördüğümüz 3 kod var.Bunlar lineWidth,strokeStyle ve lineCap.
LineWidth çizginin kalınlığı için.
StrokeStyle renk verici.
LineCap ise çizginin tipi.2 çeşidi var.Birincisi round oval ikincisi square kare.

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(200,75);
cizim.lineTo(400,75);
cizim.lineWidth=10;
cizim.strokeStyle='#ff0000';
cizim.lineCap='round';
cizim.stroke();

cizim.beginPath();
cizim.moveTo(200,95);
cizim.lineTo(400,95);
cizim.lineWidth=10;
cizim.strokeStyle='#ff0000';
cizim.lineCap='square';
cizim.stroke();
</script>

</body>

</html>


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