HTML5 Canvas
- Önceki sayfa HTML Input formu özellikleri
- Sonraki sayfa HTML5 SVG
Canvas elementi, web sayfalarında grafik çizmek için kullanılır.
Canvas nedir?
HTML5 canvas elementi, web sayfalarında JavaScript ile resim çizmek için kullanılır.
Çizim tablosu, her bir pikseli kontrol edebileceğiniz bir矩形状域dır.
Canvas, çeşitli çizim yolları, dikdörtgenler, daireler, karakterler ve resim eklemek için yöntemlere sahiptir.
Canvas elementi oluşturma
HTML5 sayfasına canvas elementi ekleyin.
Elemanın id'si, genişliği ve yüksekliğini belirtin:
<canvas id="myCanvas" width="200" height="100"></canvas>
JavaScript ile çizim yapma
canvas elementi kendi kendine çizim yeteneğine sahip değildir. Tüm çizim işlemleri JavaScript içersinde tamamlanmalıdır:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript, canvas element'ı bulmak için id kullanır:
var c=document.getElementById("myCanvas");
Ardından, context nesnesi oluşturun:
var cxt=c.getContext("2d");
"2d" parametresi içeren getContext() nesnesi, çeşitli çizim yolları, rectangle, daire, karakter ve resim eklemek için yerleşik HTML5 nesnesidir.
Aşağıdaki iki satır, bir kırmızı rectangle çizer:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle yöntemi onu kırmızıya boyar, fillRect yöntemi şekil, konum ve boyutları belirler.
Koordinatları Anlama
fillRect yöntemi (0,0,150,75) parametrelerini içerir.
Anlamı: Sağ üst köşeden başlayarak 150x75'lik bir rectangle çizin (0,0).
Aşağıdaki resimde gösterildiği gibi, çizim için kullanılan X ve Y koordinatları çizim konumunu belirler.
Daireye fareyi sürüklediğinizde koordinatları görebilirsiniz.
Daha Fazla Canvas Örneği
Aşağıda canvas elementinde çizim yapma daha fazla örnek bulunmaktadır:
Örnek - Çizgi
Başlangıç ve bitiş noktalarını belirleyerek bir çizgi çizin:
JavaScript kodu:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
canvas elementi:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Tarayıcınız canvas elementini desteklemiyor. </canvas>
Örnek - Daire
Boyut, renk ve konum belirleyerek bir daire çizin:
JavaScript kodu:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
canvas elementi:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Tarayıcınız canvas elementini desteklemiyor. </canvas>
Örnek - Geçiş
Arka plana yavaş yavaş geçiş yapacak olan rengi belirleyin:
JavaScript kodu:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
canvas elementi:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Tarayıcınız canvas elementini desteklemiyor. </canvas>
Örnek - Resim
Bir resmi kanvas üzerine yerleştirin:
JavaScript kodu:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
canvas elementi:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Tarayıcınız HTML5 canvas etiketini desteklemiyor. </canvas>
HTML Canvas eğitimi
Kanvas hakkında daha fazla bilgi öğrenmek istiyorsanız, sitemizi ziyaret edin HTML Canvas eğitimi.
İlgili sayfalar
Referans el kitabı:HTML 5 <canvas> etiketi
Referans el kitabı:HTML DOM Canvas nesnesi
- Önceki sayfa HTML Input formu özellikleri
- Sonraki sayfa HTML5 SVG
