HTML canvas Etiketi

Kasım 10, 2015

<canvas> Etiketi

Örnek

canvas etiketleri arasına mavi bir kare çizimi:

<canvas id="myCanvas"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#3059D6";
ctx.fillRect(0, 0, 80, 100);
</script>

KAYNAK KODLARI	SONUÇ EKRANI
<!DOCTYPE html> <html> <body> <canvas id="myCanvas">Tarayıcınız HTML5 canvas elementini desteklemiyor.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#3059D6"; ctx.fillRect(0, 0, 80, 100); </script> </body> </html>

<canvas> Tanımı ve Kullanımı

<canvas> etiketi genellikle JavaScript ile komut dizisi oluşturma yoluyla grafikler çizmek için kullanılır.

<canvas> elementinin kendi başına çizim özelliği yoktur. Canvas, grafikler için sadece taşıyıcı görevi görür. Grafikleri çizebilmek için bir komut dili kullanmalısınız. (JavaScript gibi)

Tarayıcı Desteği

Tablodaki sayılar canvas elementini tamamen destekleyen ilk tarayıcı versiyonunu ifade ediyor.

Element
<canvas>	4.0	12.0	9.0	2.0	3.1	9.0

HTML 4.01 ile HTML5 arasındaki farklar

<canvas> etiketi HTML5'te yenidir.

İpuçları ve Notlar

Not: <canvas> etiketleri arasındaki yazı, canvas elementini desteklemeyen tarayıcılarda görünür.

İpucu: Canvas nesnesiyle birlikte kullanılabilen tüm özellikleri ve metodları incelemek için HTML Canvas Referans sayfamızı ziyaret edebilirsiniz.

Özellikler

= HTML5'te yeni.

Özellik	Değer	Tanım
height	piksel	Canvas yüksekliğini belirler
width	piksel	Canvas genişliğini belirler

Standart Özellikler

<canvas> etiketi Standart Özellikleri desteklemektedir.

HTML Standart Özellikler'i inceleyebilirsiniz.

Olay Özellikleri

<canvas> etiketi Olay Özelliklerini desteklemektedir.

HTML Olay Özellikleri'ni inceleyebilirsiniz.

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

Uyurken Bile Para Kazanmak İster misin