Bu eleman sayesinde tarayıcı üzerinde hiçbir ek araca gerek duymadan şekil oluşturabilir, yazı yazabilir geçiş ve gölgelendirme yapabiliriz. Canvas bu işlemler için javascripte ihtiyaç duyar. Sayfada birden fazla canvas bulunabilir. Eğer bu canvaslar kesişirse z-index özelliklerini ayarlamak gerekir yoksa arkada kalanlar ekranda görünmezler.
Şimdi canvas ile bir örnek yapıyoruz:
<!DOCTYPE html>
<html>
<body>
<h1>Canvas Örneği</h1>
<canvas id="canvas" width="600" height="500"> Tarayıcı canvas özeliğini desteklemiyor.</canvas>
</body>
</html>
Canvas etiketine bir id verdik çünkü bu id ile javascript içinde canvas elemanına ulaşarak çizimi yapacağız.
Kod şu hali ile işe yaramaz çünkü daha javascripti yazmadık.
Şimdi bir dikdörtgen çizmek için javascript yazıyoruz.
fillStyle çizilecek şeklin rengini belirler. Rgba yada hex formatında olabilir.
fillRect dikdörtgen çizmek için kullanılır.
Kullanımı : fillRect(x, y, w, h); şeklindedir.
w = Uzunluk x = Soldan boşluk
h = Yükseklik y = Üstten boşluk
<!DOCTYPE html>
<html>
<body>
<h1>Canvas Örneği</h1>
<canvas id="canvas" width="600" height="500"> Tarayıcı canvas özeliğini desteklemiyor.</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var canvas1 = canvas.getContext('2d');
canvas1.fillStyle = "rgba(0, 0, 200, 1)";
canvas1.fillRect(10, 10, 75, 50);
</script>
</body>
</html>
Çalıştırdığımızda tarayıcımızda gördüğümüz sonuç:
Şimdi bir dikdörtgen daha çizelim bu sefer başka renkte ve boyutlarda olsun.
<!DOCTYPE html>
<html>
<body>
<h1>Canvas Örneği</h1>
<canvas id="canvas" width="600" height="500"> Tarayıcı canvas özeliğini desteklemiyor.</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var canvas1 = canvas.getContext('2d');
canvas1.fillStyle = "rgba(0, 0, 200, 1)";
canvas1.fillRect(10, 10, 75, 50);
canvas1.fillStyle = "rgba(200, 0, 0, 1)";
canvas1.fillRect(90, 50, 150, 50);
</script>
</body>
</html>
Çalıştırdığımızda tarayıcımızda gördüğümüz sonuç:
Şimdi son çizdiğimiz dikdörtgenin çevresine bir çizgi çekelim
<!DOCTYPE html>
<html>
<body>
<h1>Canvas Örneği</h1>
<canvas id="canvas" width="600" height="500"> Tarayıcı canvas özeliğini desteklemiyor.</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var canvas1 = canvas.getContext('2d');
canvas1.fillStyle = "rgba(0, 100, 200, 1)";
canvas1.fillRect(10, 10, 75, 50);
canvas1.fillStyle = "rgba(200, 0, 0, 1)";
canvas1.fillRect(90, 50, 150, 50);
canvas1.strokeStyle = "rgba(200, 0, 0, 0.5)";
canvas1.lineWidth=5;
canvas1.strokeRect(90, 50, 150, 50);
</script>
</body>
</html>
Çalıştırdığımızda tarayıcımızda gördüğümüz sonuç:
