Html5 canvas kullanımı, yazı, çizgi, daire, resim çizdirmek

Arif Ceylan/ Aralık 16, 2014/ HTML/ 1 comments

Html5 canvas kullanımı

Canvas html5 ile gelen yeni bir etikettir. Canvas ortamı üzerinde çizimler yapabilir, resimler ekleyebilir, animasyonlar oluşturabilir, hatta oyunlar hazırlayabilirsiniz.

Kullanımı

<canvas id="canvasim" width="500" height="500" style="border:1px solid #000">

Tarayıcınız canvası desteklememektedir.

</canvas>

Şeklindedir. Tarayıcı canvası desteklemiyorsa etiket arasındaki yazı gözükecektir.

Html kodlarıyla canvas etiketini ekledik. Canvasa müdahale etmek, çizimler yapmak için javascripti kullanmamız gerekiyor.

<script type="text/javascript">

var c=document.getElementById("canvasim"); //c değişkenine canvası tanımlıyoruz

var ctx=c.getContext("2d"); //ctx değişkenine canvas contextini aktarıyoruz.

ctx.fillStyle = "#FF0000";  // dolgu rengi tanımlama

ctx.fillRect(0,0,150,75); //canvasın 0,0 konumuna 150px genişlikte, 75px yükseklikte dikdörtgen çizer.

</script>

 

Script kodlarını canvas etiketinden sonra kullanacağız. Html kodlarının tamamı aşağıdadır.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

 

</head>

 

<body>

<canvas id="canvasim" width="500" height="500" style="border:1px solid #000">

Tarayıcınız canvası desteklememektedir.

</canvas>

 

<script type="text/javascript">

var c=document.getElementById("canvasim"); //c değişkenine canvası tanımlıyoruz

var ctx=c.getContext("2d"); //ctx değişkenine canvas contextini aktarıyoruz. 2 boyutlu. Burda webgl de kullanılabilmekte fakat tarayıcı desteği az.

ctx.fillStyle = "#FF0000";  // dolgu rengi tanımlama

ctx.fillRect(0,0,150,75); //canvasın 0,0 konumuna 150px genişlikte, 75px yükseklikte dikdörtgen çizer.

</script>

</body>

</html>

 

Yukarıdaki örnekte dikdörtgeni canvas içerisine çizdik.

Başka örneklere bakalım.

Çizgi çizdirmek

<script type="text/javascript">

var c=document.getElementById("canvasim"); //c değişkenine canvası tanımlıyoruz

var ctx=c.getContext("2d"); //ctx değişkenine canvas contextini aktarıyoruz. 2 boyutlu. Burda webgl de kullanılabilmekte fakat tarayıcı desteği az.

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

</script>

 

Daire

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

 

Yazı yazdırmak

<script>

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

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

ctx.font = "30px Arial";

ctx.fillText("Merhaba dünya",10,50);

</script>

 

Kenarlıklı, içi boş yazı(stroketext)

<script>

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

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

ctx.font = "30px Arial";

ctx.strokeText("Hello World",10,50);

</script>

 

Renk geçişi(gradient)

<script>

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

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

var grd = ctx.createLinearGradient(0,0,200,0); // Gradient oluştur

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

ctx.fillStyle = grd; // İçini gradientle doldur.

ctx.fillRect(10,10,150,80);

</script>

 

Not: Linear(doğrusal) gradient yerine circular(dairesel) gradient kullanmak için

var grd = ctx.createRadialGradient(75,50,5,90,60,100);

 

örnekteki gibi createRadialGradient fonksiyonunu kullanmamız gerekir.

Resim çizdirmek

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

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

var img = document.getElementById("scream"); //Resmin idsi ile tanımlamamız gerekiyor.

ctx.drawImage(img,10,10);

 

Yukarıdaki örnekte <img id=”scream” src=”….” /> şeklinde tanımlanmış olan resmi canvas içerisine eklemektedir.

Share this Post

1 Comment

  1. öncelikle internet üzerinde türkçe kaynaklarda canvas hakkında doğru düzgün bilgi bulamıyordum. Sizin anlatımınız çok güzel bu yüzden teşekkür ederim. gelelim soruma daire çizerken

    ctx.arc(95,50,40,0,2*Math.PI); bunu kullandınız bu nedir açıklarsanız sevinirim bide ctx ne olduğunu anlayamadım. Kusura bakmayın acemeyim açıklarsanız çok sevinirim.

Leave a Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
*
*