HTML5 Canvas - Yusuf SEZER

Trang chủ » Html Grafik çizme » HTML5 Canvas - Yusuf SEZER

Có thể bạn quan tâm

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 Grafik çizme