HTML Canvas Kullanımı

HTML TEMELLERİ

HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)

HTML5
İLERİ SEVİYE

HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)

CSS TEMELİ

CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)

html5 canvas nedir

html5 canvas kullanımı

html5 use of canvas

html5 canvas width

html5 canvas width height

html5 canvas width and height

html5 canvas full width and height

html5 canvas height auto

html5 canvas height width

html5 canvas get width and height

html5 change canvas height

html5 canvas styles

html5 canvas style width

html5 canvas border style

html5 canvas text border

html5 canvas background color

html5 canvas text background color

html5 canvas style background color

canvas background color in html5

change background color of canvas html5

html canvas nedir

html canvas width

html canvas border

html canvas background

html canvas color

html canvas example

html canvas events

html canvas kullanımı

html canvas position

html canvas stroke color

Html


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

<canvas> etiketi, web sayfanız üzerinden grafik çizmek için kullanılır. Bir sayfada birden fazla bu etiketi kullanabilirsiniz tabi 'id' vererek.Bunun için genellik javascript kullanılır bu yüzden fazla kafanızın karışmaması açısından bununla ilgili css dili üzerinden örnekler vericeğim.

1- İçi Boş Kare Kutu

Aşağıda gördüğünüz şekildeki kodları sırasıyla açıklamaya çalışalım.

width: Şeklin genişliğini ayarlar.

height: Şeklin yüksekliğini ayarlar.

style: Şekle yerel css özelliği vermeye yarar.(Css derslerinde göreceksiniz.)

border: Şekle çerçeve ekler.Boyutu,çizgi tipi, çizgi rengi şeklinde kısa yoldan kullanılır.


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

2- İçi Dolu Kare Kutu

Burda açıklamamız gereken sadece bir tek özellik bulunuyor.

background-color: Arkaplan rengini değiştirmemizi sağlar. Renk kodlarıyla yada belirlenen ingilizce renk kelimeleri ile değer verebiliriz.


<canvas id="myCanvas" width="100" height="100"style="border:1px solid blue;background-color:#00FFFF;"></canvas>

Enes KILIÇ
Webmaster