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ü :
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ü :