Html5 canvas kullanımı, yazı, çizgi, daire, resim çizdirmek
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.
ö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.