HTML <canvas> etiketi bir web sayfasında grafik çizmek için kullanılır.
Aşağıdaki grafik <canvas> ile oluşturulmuştur.
HTML Canvas Nedir?
HTML <canvas> öğesi, JavaScript aracılığıyla grafik çizmek için kullanılır.
Grafikleri çizmek için JavaScript kullanmanız gerekir. Canvas’ta yollar, kutular, daireler, metin ve resim eklemek için çeşitli yöntemler bulunur.
Canvas Tarayıcı Desteği
Tablodaki sayılar, <canvas> etiketini tam olarak destekleyen minimum tarayıcı sürümlerini gösterir.
HTML Canvas Örnekleri
Canvas, HTML sayfasındaki dikdörtgen bir alandır. Varsayılan olarak canvasın kenarlığı ve içeriği yoktur.
<canvas id="canvas" width="200" height="100"></canvas>Not: Canvas boyutunu tanımlamak için her zaman bir id, genişlik ve yükseklik niteliği belirtmek gereklidir. Kenarlık eklemek için style özelliği kullanılır.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
</body>
</html>
JavaScript Ekleme
Dikdörtgen Canvas alanını oluşturduktan sonra çizimi yapabilmek için bir JavaScript eklemelisiniz.
Aşağıda bir kaç örnek yer almaktadır:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
</body>
</html>
HTML Çember Çizme
Yukarıdaki örnekte yer alan border alanını kaldırarak bir çember çizelim.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>
HTML Canvas İle Yazı Çizimi
Aşağıdaki örnekte yer alan yazı çizim olduğundan normal bir metin gibi kopyalanamaz.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvas" width="500" height="100"></canvas>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("TurkYazilimci.com", 10, 50);
</script>
</body>
</html>
HTML Kontur Metni Çizme
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvas" width="500" height="100"></canvas>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("TurkYazilimci.com", 10, 50);
</script>
</body>
</html>
Doğrusal Gradient (Degrade) Çizme
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvas" width="500" height="100"></canvas>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
// Gradient alanı oluşturma
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "blue");
// Gradientle doldurma
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>
Dairesel Gradient (Degrade) Çizme
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvas" width="500" height="100"></canvas>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
// Gradient Oluşturma
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "blue");
grd.addColorStop(1, "orange");
// Gradient Doldurma
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>
