HTML : HTML Grafikleri

Eğitim, HTML Dersleri, Yazılım Dersleri

jpg, png ve gif gibi formatlar web sayfalarının görsel açıdan zenginleştirmek için kullanılır.

Günümüzde HTML’deki gibi çalışma anında grafik çizdirme işlemi için SVG ve Canvas yapıları W3C tarafından duyurulmuş.

SVG

SVG Ölçeklenebilir Vektör Grafikleri (Scalable Vector Graphics) anlamına gelir.
SVG vektör temelli grafikleri ifade etmek için kullanılır.
SVG grafikleri XML formatında tanımlar.
SVG grafikleri görüntü büyütülse de küçültülse de yeniden boyutlandırılma yapıldığı için kalite düşmez.
SVG resimleri etiket/metin tabanlı olduğu için aranabilir, indekslenebilir, script kodu ile yazılabilir ya da sıkıştırılabilir.
SVG dosyaları içindeki her element, her özellik (attribute) hareketlendirilebilir. (Animation)

Örnek:

Maalesef tarayıcınız satır içi SVG desteklemiyor.

</svg>

SVG Şekilleri

Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>

SVG Rectangle

</svg>

SVG Circle

</svg>

SVG Ellipse

</svg>

SVG Line

</svg>

SVG Polygon

</svg>

SVG Polyline

</svg>

SVG Text

<text x="0" y="15" fill="red">I love Paint!</text>

</svg>

SVG Path

Path aşağıdaki komutlara göre çizme işlemi yapar.

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

</svg>

SVG Stroke

Çizgi kalınlığı veya şeklini belirler.

</g>

</svg>

SVG Filters

SVG’de görüntülere çeşitli filtreler uygulayabilirsiniz. Burada iki temel örnek verilecektir fakat birçok filter olduğunu unutmayın. İstediğiniz bir tarz filter’ı SVG Filters araması yaparak bulabilirsiniz.

<defs>

</filter>

</defs>

</svg>

SVG Gradients

Bir renkten diğer renge geçiş ile renklendirme yapabilir ve DOM üzerinden JavaScript ile bu etiketlere müdale edebilirsiniz.

<defs>

<stop offset="0%" style="stop-color:rgb(255,255,255);

stop-opacity:0" />

</radialGradient>

</defs>

</svg>

HTML Canvas

Canvas, Tuval anlamına gelir.
<canvas> elementi script'ler (genellikle JavaScript) yoluyla grafikler çizmek için kullanılır.
<canvas> grafikler için sadece bir tutucudur (tuval).Gerçekten bir grafik çizmek için script kullanmalısınız.
Canvas ta SVG gibi yollar, kutular, daireler, yazılar ve resimler eklemek için bir kaç değişik metod kullanır.
JavaScript tarafında kodlandığı için event (olay) tabanlı tıklama, çift tıklama, klavye girişleri kontrol edilebilir.
Animasyon eklenebilir. Özellikle HTML tabanlı oyunlar için kullanılabilir.

1	<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Canvas

getElementByID ile HTML içindeki canvas elementi bulunur.

getContext ile tuval hazır hale getirilir.

fillStyle ile renk belirlenip fillRect komutu ile bir dikdörtgen çizimi yapılır.

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.fillStyle = "#FF0000";

ctx.fillRect(0, 0, 150, 75);

Canvas Saat Örneği:

<canvas id="canvas" width="400" height="400"

style="background-color:#333">

</canvas>

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var radius = canvas.height / 2;

ctx.translate(radius, radius);

radius = radius * 0.90

setInterval(drawClock, 1000);

function drawClock() {

drawFace(ctx, radius);

drawNumbers(ctx, radius);

drawTime(ctx, radius);

}

function drawFace(ctx, radius) {

var grad;

ctx.beginPath();

ctx.arc(0, 0, radius, 0, 2*Math.PI);

ctx.fillStyle = 'white';

ctx.fill();

grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);

grad.addColorStop(0, '#333');

grad.addColorStop(0.5, 'white');

grad.addColorStop(1, '#333');

ctx.strokeStyle = grad;

ctx.lineWidth = radius*0.1;

ctx.stroke();

ctx.beginPath();

ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

ctx.fillStyle = '#333';

ctx.fill();

}

function drawNumbers(ctx, radius) {

var ang;

var num;

ctx.font = radius*0.15 + "px arial";

ctx.textBaseline="middle";

ctx.textAlign="center";

for(num = 1; num < 13; num++){

ang = num * Math.PI / 6;

ctx.rotate(ang);

ctx.translate(0, -radius*0.85);

ctx.rotate(-ang);

ctx.fillText(num.toString(), 0, 0);

ctx.rotate(ang);

ctx.translate(0, radius*0.85);

ctx.rotate(-ang);

}

function drawTime(ctx, radius){

var now = new Date();

var hour = now.getHours();

var minute = now.getMinutes();

var second = now.getSeconds();

//hour

hour=hour%12;

hour=(hour*Math.PI/6)+

(minute*Math.PI/(6*60))+

(second*Math.PI/(360*60));

drawHand(ctx, hour, radius*0.5, radius*0.07);

//minute

minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));

drawHand(ctx, minute, radius*0.8, radius*0.07);

// second

second=(second*Math.PI/30);

drawHand(ctx, second, radius*0.9, radius*0.02);

}

function drawHand(ctx, pos, length, width) {

ctx.beginPath();

ctx.lineWidth = width;

ctx.lineCap = "round";

ctx.moveTo(0,0);

ctx.rotate(pos);

ctx.lineTo(0, -length);

ctx.stroke();

ctx.rotate(-pos);

}

</script>

canvas örnekleri, canvasla saat yapımı, html grafik dersleri, svg çizimi, svg nasıl çizilir, svg örnekleri

1 Nisan 2022

Diğer Yazılarımız

Tüm Yazılarımız

HTML: Form Temelleri

Dinamik etkileşim araçlarından oluşan HTML formlarından elde edilen değerlerin işlenmesi,…

PHP: Veritabanı Bağlantılı Sayfa Yenileme

Sayfamız üzerinde yer alan nesnelerin, veritabanından gelen bilgiler kullanılarak doldurulması…

Perakende Sektöründe Veri Madenciliği ile Stok Optimizasyonu

Günümüzde, perakende sektöründe rekabet çok yoğun bir hâle geldi. Bu…

Finansal Raporlamada Veri Analizinin Rolü

Finansal raporlama, işletmelerin performansını değerlendirmek ve stratejik kararlar almak için…

Soru işareti kalmasın

Bu yazı hakkında aklınıza takılanlar, bir fikriniz belkide şikayetiniz vardır. Yada yazımızda hatalar olduğunu düşünüyor olabilirsiniz. Peki neden bize ulaşmayı düşünmeyesiniz ki?

İletişime geç

Hizmetlerimiz

Binlerce müşterimizin yararlandığı 100'e yakın hizmetlerimizden sizlerde yararlanabilirsiniz. Onlarca ücretsiz web hizmeti ve profesyonel destekle sizleri daima daha ileriye taşımayı hedefliyoruz.

Hizmetlerimiz

Tüm Yenilik ve Kampanyalardan Haberdar Ol

Önceki Yazımız

Tüm Yazılarımız

Sonraki Yazımız

No Comments

HTML : HTML Grafikleri

SVG

SVG Şekilleri

SVG Rectangle

SVG Circle

SVG Ellipse

SVG Line

SVG Polygon

SVG Polyline

SVG Text

SVG Path

SVG Stroke

SVG Filters

SVG Gradients

HTML Canvas

Canvas

Diğer Yazılarımız

HTML: Form Temelleri

PHP: Veritabanı Bağlantılı Sayfa Yenileme

Perakende Sektöründe Veri Madenciliği ile Stok Optimizasyonu

Finansal Raporlamada Veri Analizinin Rolü

Soru işareti kalmasın

Hizmetlerimiz

Tüm Yenilik ve Kampanyalardan Haberdar Ol

Son Yazılar

Yazı hakkında ne Düşünüyorsunuz? cancel