HTML 5 Canvas Nedir ?

<canvas> bir web sayfası üzerinde grafik çizmek için kullanılan bir araç veya elemandır.

Canvas Nedir ?

Html5 <canvas> eleamanı script vasıtasıyla (genellikle JavaScript) grafik çizmek için kullanılır.

<canvas> sadece grafik özelliklerini kapsar.  Aslında çizim yapmak için script kullanmanız gerekiyor.

Canvas ile çizim  yapmak için birkaç metod bulunuyor : boxes (kutular), circles (daireler), text (yazı) ve ek olarak image (resim).

Örneklerle anlamaya çalışalım :

Örnek  1 (dikdörtgen çizmek): 

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>

Örneği inceleyecek olursak :

• Canvas çağrılıyor // var c = document.getElementById("myCanvas");


• Daha sonra getContext() (getContext() 2d geçmek zorunda) metodu // getContext("2d") HTML5 içerisindeki bir objedir. Çizim için gereken özelliklere ve metodlara sahiptir.

Canvas 2 boyutlu bir griddir. Sol üst köşesinin kordinatları (0,0) dır. Yukarıdaki örnekte fillRect() metodu bir kaç parametre alıyor (0,0,150,75). Bu sol üst köşeden başlayarak  (0,0) ve 150x75 pixel ölçülerinde bir dikdörtgen çiz demektir.

Sonuç : 



Örnek 2 (Düz çizgi)

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

• moveTo(x,y) çizginin başlangıç noktası


• lineTo(x,y) çizginin bitiş noktası

Örnek 3 (Daire)

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

• arc(x,y,r,başlangıç,bitiş) daire çizmek için kullanılan metodudur.

Örnek 4 (Yazı)

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Merhaba dünya",10,50);

• font - font tipi


• fillText(text,x,y) - Yazının içini doldurur


• strokeText(text,x,y) - Yazının içini boşaltılır

Solda ki fillText, sağdaki strokeText



Örnek 5 (Gradient) : 

Linear gradient : 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

• createLinearGradient(x,y,x1,y1) - Linear gradient yaratır.

addColorStop() metodu rengin bitiş noktasını belirler. Gradient pozisyonu her yerde 0 ve 1 arasındadır.

Örnek 6 (Image) :

<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"></canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);

</script>

 

• drawImage(image,x,y) - Resim çizmek için kullanılır.