- sozturk
- 2 Eylül, 2012
- 0
HTML5 Canvas Çizim Tuali
HTML5’e giriş isimli yazıda HTML5 ile birlikte gelen yeni etiketlerden kısaca bahsetmiştik. Bu yazıda da HTML5 ile birlikte gelen <Canvas> etiketiyle ilgili giriş yapacağız.
Canvas etiketi tarayıcı üzerinde ekstra bir eklentiye ihtiyaç duymadan çizim ve animasyonlar oluşturmamıza yarayan araçtır. Canvas etiketinden kısaca tarayıcı üzerinde kendimize oluşturduğumuz bir çizim tuali olarak da bahsedebiliriz.
HTML5 Canvas elementi işlemleri gerçekleştirirken JavaScript’e ihtiyaç duymaktadır.
Internet Explorer 9, Firefox, Opera, Chrome, and Safari canvas etiketini desteklemektedir.
Basit bir canvas elementi kullanım örneği:
Canvas elementi tanımlama biçimi:
<canvas id="CanvasID" width="300" height="100" style="border: 1px solid #ccc;">
</canvas>
*Canvas elementini tanımlarken yükseklik ve genişlik belirtmek zorundayız. Aksi durumda tarayıcımızda canvas elementini göremeyiz. Aşağıda JavaScript ile x,y 0,0 noktasından 300,100 noktasına bir doğru çiziyoruz.
<script type="text/javascript">
var cnvs =document.getElementById("CanvasID");
var cntx= cnvs.getContext("2d");
cntx.moveTo(0,0); // Başlangıç Noktası
cntx.lineTo(300,100); // Bitiş noktası
cntx.lineWidth = 10; // Çizgi kalınlığı
cntx.stroke();
</script>
Bu örnek canvas kullanımı için başlangıç örneği, canvas etiketi kullanılarak çok kapsamlı çizimler, animasyonlar yapmak mümkün.
Canvas etiketi oldukça kapsamlı bir araç. Önümüzdeki dönemde canvas etiketiyle ilgili daha detaylı örnekler ve uygulamalar paylaşıyor olacağım.