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 Canvas Grafik
-
HTML5 Ile Canvas (Grafik) Çalışmak - HTML Dersleri
-
HTML Canvas Tutorial - W3Schools
-
JavaScript Ve HTML5 Canvas Kullanarak Grafikler Çizmek
-
HTML Canvas - W3bai
-
Mengenal HTML5 Canvas Untuk Pemrograman Grafis Dan Game
-
HTML5 Grafik Elemanları | Geleceği Yazanlar
-
Drawing Graphics - Learn Web Development | MDN
-
Html Canvas Etiketi Ve Kullanımı 2021 - ArmyYazilim
-
HTML5 Ders 61 Grafik Çizimleri (Canvas) - YouTube
-
Cara Menggambar Grafik Menggunakan JavaScript Dan Canvas ...
-
How To Draw Charts Using JavaScript And HTML5 Canvas
-
HTML Canvas
-
HTML Canvas Etiketi | M5 Bilişim