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