HTML5 Ile Canvas (Grafik) Çalışmak - HTML Dersleri

HTML5 Canvas 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 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ı:

Ö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 »