HTML5 Canvas

Paylaş

HTML5 ile gelen API’ler arasında önemli bir yere sahip olan Canvas API özelliğinin ne olduğu, nasıl çalıştığı ve nasıl kullanıldığı canvas örnekleri ile yer alıyor.

HTML5 <canvas> etiketi grafiksel çizim için kullanılır.

HTML5 <canvas> etiketi ile çizgi, dikdörtgen, çember, daire vb. şekiller oluşturabilir, gradient, renk verme gibi işlemlerle renk verebilirsiniz.

HTML5 canvas nedir

HTML5 <canvas> etiketi JavaScript aracılığıyla grafiksel şekiller çizmek için kullanılır.

Etiket sadece taşıyıcı görevi görür. Grafik çizmek için JavaScript kullanılır.

Canvas örnekleri

HTML5 <canvas> etiketi sayfa içerinde dikdörtgen bir alan kaplar.

Etiket kullanıldığında çizime ve kenarlığa sahip değildir.

HTML <canvas> etiketi genellikle aşağıdaki gibi yazılır.

<canvas id="cizimAlani" width="300" height="300"></canvas>

NOT: Her zaman <canvas> etiketine id özelliği (JavaScript seçimi için), yükseklik ve genişlik değeri verin.

Çizim alanını ve çizimleri daha iyi görebilmek için style özelliği ile kenarlık eklemeyi unutmayın.

<canvas id="cizimAlani" width="300" height="300" style="border:1px solid #000000;">
</canvas>

Aşağıda çeşitli kullanım örnekleri yer almaktadır.

<!DOCTYPE HTML>
<html lang="tr">

<head>
  <meta charset="UTF-8" />
  <title>HTML5 Canvas Örnekleri</title>
</head>

<body>
  <canvas id="cizimAlani" width="270" height="160" style="border:1px solid #c3c3c3;">
  </canvas>
  <script>
    var cizimAlani = document.getElementById("cizimAlani");

    /* Kırmızı dikdörtgen */
    var ctx = cizimAlani.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(20, 20, 100, 50);

    /* Gradient dikdörtgen 1 */
    var grd = ctx.createLinearGradient(140, 20, 240, 70);
    grd.addColorStop(0, "black");
    grd.addColorStop(1, "white");
    ctx.fillStyle = grd;
    ctx.fillRect(140, 20, 100, 50);

    /* Gradient dikdörtgen 2 */
    var grd2 = ctx.createLinearGradient(20, 90, 120, 90);
    grd2.addColorStop(0, "black");
    grd2.addColorStop("0.3", "magenta");
    grd2.addColorStop("0.5", "blue");
    grd2.addColorStop("0.6", "green");
    grd2.addColorStop("0.8", "yellow");
    grd2.addColorStop(1, "red");
    ctx.fillStyle = grd2;
    ctx.fillRect(20, 90, 100, 50);

    /* Renkli metin */
    ctx.font = "30px Verdana";
    var grd3 = ctx.createLinearGradient(140, 20, 240, 90);
    grd3.addColorStop(0, "black");
    grd3.addColorStop("0.3", "magenta");
    grd3.addColorStop("0.6", "blue");
    grd3.addColorStop("0.8", "green");
    grd3.addColorStop(1, "red");
    ctx.strokeStyle = grd3;
    ctx.strokeText("Canvas!", 135, 125);

    /* www.yusufsezer.com.tr */
    ctx.font = "15px arial";
    ctx.fillStyle = "black";
    ctx.fillText("www.yusufsezer.com.tr", cizimAlani.height / 2, cizimAlani.width / 2 + 20);
  </script>
</body>

</html>

Aşağıdaki canvas örneklerini <script> etiketi arasına ekleyerek deneyebilirsiniz.

Çizgi çizmek

var cizimAlani = document.getElementById("cizimAlani");
var ctx = cizimAlani.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(270, 160);
ctx.stroke();

Çember çizmek

var cizimAlani = document.getElementById("cizimAlani");
var ctx = cizimAlani.getContext("2d");
ctx.beginPath();
ctx.arc(120, 80, 60, 0, 2 * Math.PI);
ctx.stroke();

Daire çizmek

var cizimAlani = document.getElementById("cizimAlani");
var ctx = cizimAlani.getContext("2d");
ctx.beginPath();
ctx.arc(120, 80, 60, 0, 2 * Math.PI);
ctx.lineWidth = 5;
ctx.fillStyle = "blue";
ctx.fill();
ctx.stroke();

Dikdörtgen çizmek

var cizimAlani = document.getElementById("cizimAlani");
var ctx = cizimAlani.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 240, 140);

Yazı yazmak

var cizimAlani = document.getElementById("cizimAlani");
var ctx = cizimAlani.getContext("2d");
ctx.font = "20px Arial";
ctx.fillText("www.yusufsezer.com.tr", 30, 80);

Kenarlıklı yazı yazmak

var cizimAlani = document.getElementById("cizimAlani");
var ctx = cizimAlani.getContext("2d");
ctx.font = "20px Arial";
ctx.strokeText("www.yusufsezer.com.tr", 30, 80);

Gradient oluşturmak ve uygulamak

var cizimAlani = document.getElementById("cizimAlani");
var ctx = cizimAlani.getContext("2d");

// Gradient oluşturur
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "#000");
grd.addColorStop(1, "#FFF");

// Gradient uygular
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 200, 140);

Dairesel gradient oluşturmak ve uygulamak

var cizimAlani = document.getElementById("cizimAlani");
var ctx = cizimAlani.getContext("2d");

// Dairesel Gradient oluşturur
var grd = ctx.createRadialGradient(110, 80, 5, 110, 80, 70);
grd.addColorStop(0, "#FF0000");
grd.addColorStop(1, "#FFFFFF");

// Dairesel Gradient uygular
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 250, 140);

Örnek kodları incelemek için tıklayın.

HTML5 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.

Facebook