HTML5 Canvas - Yusuf SEZER

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.

Từ khóa » Html Canvas Grafik