HTML Canvas Etiketi Nedir ve Nasıl Kullanılır?
HTML canvas, web sayfalarına basit şekiller çizmeye yarayan bir etikettir. Örneğin bir kare, dikdörtgen vb. Bu sebeple canvas etiketinden üst düzey bir performans beklemek yanlış olur. Bu etiket tek başına kullanılamaz. Bu yüzden bu etiket ile çalışmak için JavaScript dilini kullanmamız gerekir.
<canvas> … </canvas> etiketinin standart kullanımı aşağıdaki gibidir.
<!– canvas elementi olusturuldu –>
<canvas id=”id_degeri” width=”genislik” height=”uzunluk”></canvas>
<!– JavaScript ile canvas islemleri –>
<script type=”text/javascript”>
</script>
Canvas ile yalnızca 2 boyutlu şekil ve resimler oluşturulabilir.
Canvas etiketini kullanarak basit şekiller çizdirmeye çalışalım. Örneğimiz aşağıdaki gibi olacaktır.
<!DOCTYPE html>
<head>
<title> Canvas Örnek </title>
<meta charset="utf-8">
</head>
<body>
<!-- canvas element -->
<canvas id="myShape" width="640" height="480"></canvas>
<!-- JavaScript ile canvas islemleri -->
<script type="text/javascript">
var context = document.getElementById("myShape");
// evin dis yapisi
var disYapi = context.getContext("2d");
disYapi.fillStyle = "rgb(98, 150, 202)";
disYapi.fillRect(0, 0, 640, 480);
// pencereler
var pencere1 = context.getContext("2d");
pencere1.fillStyle = "rgb(255, 255, 255)";
pencere1.fillRect(10, 10, 150, 200);
var pencere2 = context.getContext("2d");
pencere2.fillStyle = "rgb(255, 255, 255)";
pencere2.fillRect(240, 10, 150, 200);
var pencere3 = context.getContext("2d");
pencere3.fillStyle = "rgb(255, 255, 255)";
pencere3.fillRect(480, 10, 150, 200);
var pencere4 = context.getContext("2d");
pencere1.fillStyle = "rgb(255, 255, 255)";
pencere1.fillRect(10, 240, 150, 200);
var pencere5 = context.getContext("2d");
pencere2.fillStyle = "rgb(255, 255, 255)";
pencere2.fillRect(240, 240, 150, 200);
var pencere6 = context.getContext("2d");
pencere3.fillStyle = "rgb(255, 255, 255)";
pencere3.fillRect(480, 240, 150, 200);
</script>
</body>
</html>
Yukarıdaki örneğimizde bir ev çizdirmeye çalıştık. Bu örneğimize ait ekran çıktısını alalım.
Yukarıdaki ekran alıntısında da görüldüğü gibi evimizi canvas ve JavaScript yardımıyla çizdik. canvas ile değişik şekiller elde edebilir ve hatta resim dosyaları üzerinde çalışabilirsiniz.
HTML canvas etiketi konusunu bu yazımızda gördük. Konu ile ilgili soru, görüş ya da fikirlerinizi aşağıda bulunan yorumlar kısmı ile bizlere ulaştırabilirsiniz. Aşağıdaki linke tıklayarak HTML ile ilgili diğer yazılarımıza da ulaşabilirsiniz. Ayrıca Instagram ve Twitter linklerine de tıklayarak bizi Instagram ve Twitter üzerinden takip ederek destek olabilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/html/
Sosyal Medya Hesaplarımız
