banner
htmldersleri
Ana SayfaANA SAYFA Dersler | Örnekler | Forum | Sıkça Sorulan Sorular |Hakkında
HTML Temel
HTML Giriş
HTML Elementler
HTML Etiketler
HTML Parametreler
HTML Biçimlendirme
HTML Özeller
HTML Bağlantılar
HTML Çerçeveler
HTML Tablolar
HTML Listeleme
HTML Formlar
HTML Resimler
HTML Arka Plan
HTML Renkler
HTML Renk Değerleri
HTML Renk İsimleri
HTML Hızlı Liste

HTML5 Ana Menü
HTML5 Giriş
HTML5 Anlamlandırma
HTML5 Giriş Tipleri
HTML5 Form Elementleri
HTML5 Form Özellikleri
HTML5 Canvas
HTML5 SVG
HTML5 Video
HTML5 Audio
HTML5 Konum
HTML5 Sürükle/Bırak
HTML5 Web Depolama
HTML5 Uygulama Bellekleme
HTML5 Web Çalışanı
HTML5 SSE

HTML Gelişmiş
HTML Tasarım
HTML Fontlar
HTML Stiller
HTML Başlık
HTML Meta
HTML URL
HTML Scriptler
HTML Std. Nitelikler
HTML Olaylar
HTML ASCII
HTML Web Sunucu

HTML Örnekler/Test
HTML Örnekler
HTML Örnek Site
HTML Test

HTML5 Canvas

Önceki Sonraki
Tarayıcınız bu özelliği desteklemiyor.

<canvas> elementi bir web sayfasında grafik çizmek için kullanılır.

Sol taraftaki örnek, bir tuvalin (canvas) üstünde bir kırmızı dikdörtgen, bir eğimli dikdörtgen, bir çok renkli dikdörtgen ve bir çok renkli metin göstermektedir.


Canvas (Tuval) Nedir?

HTML5 <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 yollar, kutular, daireler, yazılar ve resimler eklemek için bir kaç değişik metod kullanır.

Tarayıcı Desteği

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9+, Firefox, Opera, Chrome, ve Safari <canvas> elementin destekler.

Not: Internet Explorer 8 ve öncesi desteklemez.

Canvas oluşturmak

Bir canvas bir HTML sayfasındaki dikdörtgen bir alandır ve <canvas> elementi ile belirtilir.

Not: Varsayılan olarak <canvas> elementinin sınırları ve içeriği yoktur.

Biçimlendirme (markup) şu şekildedir:

<canvas id="myCanvas" width="200" height="100"></canvas>

Not: Her zaman bir "ID" etiketi (script içinde kullanmak için) ve canvas'ın boyutlarını belirtmek için bir genişlik (width) ve yükseklik (height) özelliği kullanın.

İpucu: Bir HTML sayfasında birden fazla <canvas> elementi kullanabilirsiniz.

Bir sınır kalınlığı (border) eklemek için stil (style) kullanın:

Örnek

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

Kendin Dene »

JavaScript ile Canvas (Tuval) Üzerine Çizim Yapmak

Canvas üzerindeki tüm çizimler JavaScript içinde yapılmalıdır:

Örnek

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Kendin Dene »

Örneğin açıklaması:

İlk olarak, <canvas> elementini bul:

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

Sonra, getContext() metodunu çağırın. ((getContext() metodunu çağırmak için "2d" string ifadesini yazmak zorundasınız):

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

getContext("2d") nesnesi, HTML nesneleri içinde olan, yollar, kutular, daireler, yazılar, resimler ve daha fazlasını çizmek için bir çok özelliği ve metodu olan bir gömme'dir. (built-in).

Sonraki iki satır kırmızı bir dikdörtgen çizer:

ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);

fillStyle özelliği bir CSS rengi, bir eğim (gradient) ya da bir desen olabilir. Varsayılan değeri ise #00000, yani siyahtır.

fillRect(x,y,width,height) metodu, o anki fillStyle ile bir dikdörtgen çizer.

Canvas Koordinatları

Canvas iki boyutlu bir ızgaradır (grid).

Canvas'ın sol üst koordinatları(0,0)'dır.

Ve yukarıdaki fillRect() metodu(0,0,150,75) parametlerine sahipse

Bunun anlamı: "Sol-üst köşeden başla ve 150x75 piksel boyutlarında bir dikdörtgen çiz" demektir.

Koordinat Örneği

Farenizi aşağıdaki dikdörtgenin üzerinde gezdirin ve (x,y) koordinatlarını görün. (x = yatay, y = dikey):

X
Y

Canvas - Yollar (Paths)

Bir Canvas'ın üzerine düz çizgiler çizmek için, aşağıdaki metodları kullanacağız:

  • moveTo(x,y) Satırın başlama noktasını belirtir
  • lineTo(x,y) Satırın bitiş noktasını belirtir

Gerçekten çizgi çizmek için, "ink" metodlarından birini, örneğin stroke() komutunu kullanmak zorundayız.

Örnek

Başlangıç noktası olarak (0,0) ve bitiş noktası olarak (200,100) kullanın ve stroke() komutunu kullanarak çizgi çizin:

Tarayıcınız bu özelliği desteklemiyor.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Kendin Dene »

Daire yada çember çizmek için aşağıdaki metodu kullanacağız:

  • arc(x,y,r,start,stop)

Gerçekten bir çember çizmek için, "ink" metodlarından stroke() yada fill() komutlarını kullanmak zorundayız.

Örnek

arc() metodunu kullanarak çember çizmek

Tarayıcınız bu özelliği desteklemiyor.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Kendin Dene »

Canvas - Metin

Canvas üzerine bir metin çizmek için en önemli özellik ve metodlar şunlardır:

  • font - Metinin font özelliklerini belirtir.
  • fillText(text,x,y) - Dolgulu metin çizer
  • strokeText(text,x,y) - Metin çizer (dolgu yok)

FillText() Kullanımı:

Örnek

30 piksel yüksekliğinde, Arial fontunu kullanarak dolgulu bir metin yazın:

Tarayıcınız bu özelliği desteklemiyor.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Merhaba Dünya",10,50);

Kendin Dene »

strokeText() Kullanımı:

Örnek

30 piksel yüksekliğinde, Arial fontunu kullanarak dolgusuz bir metin yazın:

Tarayıcınız bu özelliği desteklemiyor.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Merhaba Dünya",10,50);

Kendin Dene »

Canvas - Eğimler (Gradients)

Eğimler dikdörtgenleri, çemberleri, çizgileri, metinleri ya da başka şeyleri doldurmak için kullanılır. Canvas üzerindeki şekiller koyu renklerle sınırlandırılmaz.

There are two different types of gradients:

  • createLinearGradient(x,y,x1,y1) - Düzgün eğim yaratır.
  • createRadialGradient(x,y,r,x1,y1,r1) - Çembersel eğim yaratır.

Eğer bir eğimsel nesnemiz varsa, iki ya da daha fazla "color stops" eklemeliyiz.

addColorStop() metodu "color stops"ları ve onların gradient boyunca olan pozisyonlarını belirtir. Gradient'lerin pozisyonları 0 ve 1 arasında herhangi bir yerde olabilir.

Gradient kullanmak için, fillStyle veya strokeStyle özelliğini gradient üzerinde kullanın ve dikdörtgen, metin ya da çizgi gibi şekiller çizin.

createLinearGradient() Kullanımı:

Örnek

Düzgün doğrusal bir eğim yaratın. Dikdörtgeni eğimli olarak dolgulandırın:

Tarayıcınız bu özelliği desteklemiyor.

JavaScript:

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

// Gradient'i oluşturma
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Eğimli olarak dolgulandırma
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

Kendin Dene »

createRadialGradient() Kullanımı:

Örnek

Bir çembersel gradient oluşturun ve dikdörtgeni eğimli olarak dolgulandırın:

Tarayıcınız bu özelliği desteklemiyor.

JavaScript:

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

// Gradient'i oluşturma
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Eğimli olarak dolgulandırma
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

Kendin Dene »

Canvas - Resimler

Bir canvas üzerine bir resim çizmek için aşağıdaki metodu kullanacağız:

  • drawImage(image,x,y)

Resim Kullanımı:

The Scream

Örnek

Canvas üzerine resim çizmek:

Tarayıcınız bu özelliği desteklemiyor.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);

Kendin Dene »

Önceki Sonraki
html dersleri
Dersler Örnekler Online Test