HTML5 Canvas Kullanımı

31 Ocak 2015 - 71 Okunma
HTML5 Canvas Kullanımı
<canvas> elementi bir web sayfasında grafik çizmek için kullanılır. Bu element Internet Explorer 9+, Firefox, Opera, Chrome ve Safari tarafından desteklenmektedir. Canvas Nedir? Nasıl Kullanılır? HTML5‘deki <canvas> elementi script’ler (JavaScript) yoluyla grafikler çizmek için kullanılır. <canvas> (tuval) grafikler için sadece bir tutucudur. Grafikler bu tuvalin üzerine çizilir. Canvas yollar, kutular, daireler, yazılar ve resimler eklemek için […]

<canvas> elementi bir web sayfasında grafik çizmek için kullanılır. Bu element Internet Explorer 9+, Firefox, Opera, Chrome ve Safari tarafından desteklenmektedir.

Canvas Nedir? Nasıl Kullanılır?

HTML5‘deki <canvas> elementi script’ler (JavaScript) yoluyla grafikler çizmek için kullanılır. <canvas> (tuval) grafikler için sadece bir tutucudur. Grafikler bu tuvalin üzerine çizilir. Canvas yollar, kutular, daireler, yazılar ve resimler eklemek için bir kaç değişik metod kullanır.

Canvas Oluşturmak

Canvas HTML sayfasındaki dikdörtgen bir alandır ve <canvas> elementi ile belirtilir.

<canvas id="myCanvas" width="500" height="300"></canvas>

Canvas oluştururken her zaman bir ID etiketi (script için) kullanın ve canvas’ın boyutlarını belirtmek için bir genişlik (width) ve yükseklik (height) özelliği kullanın. Bir HTML sayfasında birden fazla <canvas> elementi kullanılabilir.

HTML kodları içinde bir canvas aşağıdaki gibi görünür;

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="300"></canvas>
</canvas>

</body>
</html>

JavaScript ile Canvas (Tuval) Üzerine Çizim Yapmak

Canvas üzerindeki tüm çizimler JavaScript içinde yapılmalıdır.

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="300"></canvas>
</canvas>

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

</body>
</html>

Şimdi örneğimizi açıklayarak öğrenelim. İlk olarak <canvas> elementini değişkene atıyoruz;


var c = document.getElementById("myCanvas");

Sonra getContext() metodunu çağırıyoruz. getContext() metodunu çağırırken “2d” string ifadesini yazmak zorundayız.


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

getContext(“2d”) nesnesi, HTML nesneleri içinde olan yollar, kutular, daireler, yazılar, resimler ve daha fazlasını çizmek için bir çok özelliği ve metodu içinde barındırır. Yani built-in bir nesnedir

Sonraki iki satır gri bir dikdörtgen çizer;

ctx.fillStyle = "#999";
ctx.fillRect(10,0,150,75);

fillStyle özelliği içinde bir CSS rengi, bir gradient veya bir desen kullanabiliriz. Varsayılan değeri #00000 (siyah) tır.

fillRect(x,y,width,height) metodu fillStyle ile belirlediğimiz renkten veya desenden bir dikdörtgen çizer.

Canvas Koordinatları Nelerdir?

Canvas iki boyutlu bir (Grid) ızgaradır. Canvas’ın sol üst koordinatları (x,y) (0,0)’dır. X Sağa doğru Y ise Aşağı doğru artar.

canvas-coordinates

Canvas Yollar (Path)

Bir Canvas’ın üzerine düz çizgiler çizmek için aşağıdaki metodları kullanmamız gerekir.

  • moveTo(x,y) Satırın başlama noktasını belirtir.
  • lineTo(x,y) Satırın bitiş noktasını belirtir.

Canvasta çizgi çizmek için stroke() komutunu kullanacağız.

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Tarayıcınız bu özelliği desteklemiyor.</canvas>

<script>

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

</script>

</body>
</html>

Eğer daire çizmek istiyorsak arc(x,y,r,start,stop) ı kullanırız.


<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Tarayıcınız bu özelliği desteklemiyor.</canvas>
<script>

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

</script> 

</body>
</html>

Eğer metin yazmak istiyorsak kullanmamız gereken birden fazla metod vardır.

  • font – Metinin font özelliklerini belirtir.
  • fillText(text,x,y) – Dolgulu metin çizer
  • strokeText(text,x,y) – Metin çizer
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="250" height="100" style="border:1px solid #d3d3d3;">
Tarayıcınız bu özelliği desteklemiyor.</canvas>
<script>

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

</script>

</body>
</html>

Bu örneği strokeText() ile yazarsak;

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="250" height="100" style="border:1px solid #d3d3d3;">
Tarayıcınız bu özelliği desteklemiyor.</canvas>
<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="22px Arial";
ctx.strokeText("Merhaba HTML5",10,50);
</script>

</body>
</html>

Canvas Gradient Kullanımı

2 tip Canvas Gradient’i mevcuttur. Bunlar createLinearGradient(x,y,x1,y1) (Düzgün eğim) createRadialGradient(x,y,r,x1,y1,r1) (Çembersel eğim) oluşturur. Eğer bir eğimsel nesnemiz varsa, iki ya da daha fazla color stops eklemeliyiz.

addColorStop() metodu color stopsları ve onların gradient boyunca olan pozisyonlarını belirtir. Gradient lerin pozisyonları 0 ve 1 arasında herhangi bir yerde olabilir.

createLinearGradient() Kullanımı

Düzgün doğrusal bir eğim yaratın. Dikdörtgeni eğimli olarak dolgulandırın

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Tarayıcınız bu özelliği desteklemiyor.</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Eğimli yüzey oluşturma
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"#000");
grd.addColorStop(1,"white");
// Eğimli yüzeyi doldurma
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>

</body>
</html>

createRadialGradient() Kullanımı

Bir çembersel gradient oluşturun ve dikdörtgeni eğimli olarak dolgulandırın.

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Tarayıcınız bu özelliği desteklemiyor.</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Eğimli yüzey oluşturma
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"#000");
grd.addColorStop(1,"white");
// Eğimli yüzeyi doldurma
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>

</body>
</html>

Canvas Resimler

Bir canvas üzerine bir resim çizmek için drawImage(image,x,y) metodunu kullanırız.

<!DOCTYPE html>
<html>
<body>

<p>Resim kullanımı</p>
<img id="imageismi" src="img_ismi.jpg" alt="imgismi" width="250" height="300"><p>Canvas:</p>
<canvas id="myCanvas" width="350" height="275">
Tarayıcınız bu özelliği desteklemiyor.</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("imageismi");
ctx.drawImage(img,10,10);
</script>

</body>
</html>
ITC | İlkteknoloji