HTML <canvas> Etiketi

Tanım ve kullanım

<canvas> Etiket genellikle betik (genellikle JavaScript) ile gerçek zamanlı olarak grafik çizer。

<canvas> Etiket şeffaftır, sadece grafik容器的，必须使用脚本才能实际绘制图形。

JavaScript'i devre dışı bırakılan ve canvas'i desteklemeyen <canvas> tarayıcınızda <canvas> ögesi içersindeki her türlü metni görüntüler.

İpucu

HTML Canvas Eğitimimizde ilgili <canvas> öğesinin daha fazla bilgiye

Tüm özellikler ve yöntemlerin tam referansını görmek için lütfen bizim HTML Canvas Referans Kılavuzu.

Örnek

Örnek 1

Canlı olarak bir kırmızı rectangle çiz ve <canvas> ögesinde görüntüle:

<canvas id="myCanvas">
Tarayıcınız canvas etiketini desteklemiyor.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Kişisel olarak deneyin

Örnek 2

Bir diğer canvas örneği:

<canvas id="myCanvas">
Tarayıcınız canvas etiketini desteklemiyor.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Şeffaflığı aç
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Kişisel olarak deneyin

Özellik

Özellik Değer Açıklama
height Piksel değeri Çizim tablosunun yüksekliğini belirler. Varsayılan değeri 150'dir.
width Piksel değeri Çizim tablosunun genişliğini belirler. Varsayılan değeri 300'dür.

Genel özellikler

<canvas> Bu etiket, olay özelliklerini destekler HTML'deki genel özellikler.

Olay özellikleri

<canvas> Bu etiket, olay özelliklerini destekler HTML'deki olay özellikleri.

Varsayılan CSS ayarları

Çoğu tarayıcı aşağıdaki varsayılan değerleri kullanarak görüntüleyecek <canvas> Element:

canvas {
  height: 150px;
  width: 300px;
}

Kişisel olarak deneyin

canvas'in tarihi

Bu HTML ögesi, istemci vektör grafikleri için tasarlanmıştır. Kendisi herhangi bir davranışa sahip değil, ancak istemci JavaScript'e bir çizim API'si sunar, böylece betikler, çizmek istedikleri her şeyi bir tabloya çizebilmelerini sağlar.

<canvas> işareti, Apple tarafından Safari 1.3 Web tarayıcısında tanıtılmıştır. HTML'in bu temel genişletilmesinin nedeni, Safari'de HTML'nin çizim yeteneklerinin Mac OS X masaüstü Dashboard bileşeni tarafından kullanılması ve Apple'nın Dashboard'ta betikli grafikleri desteklemek için bir yol aramasıdır.

Firefox 1.5 ve Opera 9, Safari'nin öncülüğünü izlemiştir. Bu iki tarayıcı, <canvas> işaretini desteklemektedir.

Biz, IE'de <canvas> işaretini kullanabilir ve IE'nin VML desteği üzerine, Google tarafından başlatılan açık kaynaklı JavaScript kodu (open-source JavaScript) ile uyumluluk çizimleri oluşturabiliriz. Görünüm:http://excanvas.sourceforge.net/.

<canvas> standartlaştırma çabaları, web tarayıcı üreticilerinin resmi bir derneği tarafından ilerletilmektedir; şu anda <canvas>, HTML 5 taslağında resmi bir etiket haline gelmiştir. Görünüm:http://www.whatwg.org/specs/web-apps/current-work/

<canvas> işareti ve SVG ile VML arasındaki farklar

<canvas> işareti ve SVG ile VML arasındaki önemli bir fark, <canvas>'nin bir JavaScript tabanlı çizim API'sine sahip olması, SVG ve VML'nin ise çizimi tanımlamak için bir XML belgesi kullanmasıdır.

Bu iki yöntem, işlevsel olarak eşdeğerdir; her biri diğerini taklit edebilir. Dış görünüşleri oldukça farklı, ancak her biri avantajları ve dezavantajlarıyla gelir. Örneğin, SVG çizimleri kolayca düzenlenebilir, çünkü elementler tanımlamadan kaldırılabilir.

Aynı grafikten bir <canvas> işaretinden bir elementi çıkarmak için, genellikle çizimi silmek ve yeniden çizmek gerekebilir.

<canvas> işareti nasıl çizim yapılır

Çoğu Canvas çizim API'si, <canvas> elementi üzerinde tanımlanmamıştır, aksine, çizim üzerinde tanımlanmıştır. getContext() yöntemiAlınan bir 'çizim ortamı' nesnesi üzerinde.

Canvas API, yolların temsil yöntemini kullanır. Ancak, yollar, beginPath() ve arc() gibi yöntem çağrılarıyla tanımlanır, harfler ve rakamlardan oluşan bir dizi olarak tanımlanmaz.

Yol tanımlandıktan sonra, fill() gibi diğer yöntemler bu yola işlem yapar. Çizim ortamının çeşitli özellikleri, örneğin fillStyle, bu işlemlerin nasıl kullanılacağını açıklar.

Açıklama:Canvas API, metin çizimine hiçbir destek sağlamayan son derece kompakt bir nedenle budur. Bir <canvas> grafikine metin eklemek için ya kendisini çizip ardından bitmatik görsel ile birleştirmek, ya da <canvas> üzerinde CSS konumlandırma kullanarak HTML metnini üstüne yazmak gerekir.

Tarayıcı desteği

Tablo içindeki numaralar, bu öğenin ilk tam olarak destekleyen tarayıcı sürümünü belirtir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0