HTML DOM Kanva nesnesi

<canvas> elementi, HTML sayfasındaki bit map alanını tanımlar.

Canvas API, JavaScript'in çizim yapabileceği bir çizim alanı sunar.

Canvas API, şekiller, çizgiler, eğriler, kutular, metin ve görseller, ayrıca renk, döndürme, şeffaflık ve diğer pixel işlemleri çizmek için izin verir.

Canvas'ı HTML'ye ekleyin

HTML sayfasındaki herhangi bir yerde canvas elementi eklemek için <canvas> etiketini kullanabilirsiniz:

Örnek

<canvas id="myCanvas" width="300" height="150"></canvas>

Kişisel olarak deneyin

Canvas elementine nasıl erişilir

HTML DOM yöntemi ile getElementById() kullanarak <canvas> elementine erişebilirsiniz:

const myCanvas = document.getElementById("myCanvas");

Panoda çizim yapmak için 2D kontekst nesnesi oluşturmanız gerekmektedir:

const ctx = myCanvas.getContext("2d");

Notlar

HTML <canvas> elementi kendisi görsel çizim işlevine sahiptir.

Herhangi bir grafik çizmek için JavaScript kullanmanız gerekmektedir.

getContext() yöntemi, çizim araçları (yöntemleri) içeren bir nesne döndürür.

Panoda çizim yapmak

2D kontekst nesnesi oluşturduktan sonra, panoda çizim yapabilirsiniz.

Aşağıdaki fillRect() yöntemi, sol üst köşesi 20,20 konumunda olan, genişliği 150 piksel, yüksekliği 100 piksel olan siyah bir dikdörtgen çizer:

Örnek

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Kişisel olarak deneyin

Renk kullanarak

fillStyle özelliği, çizim nesnesinin doldurma rengini ayarlar:

Örnek

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Kişisel olarak deneyin

Yeni bir <canvas> elementi oluşturmak için document.createElement() yöntemini kullanabilir ve bu elementi mevcut HTML sayfasına ekleyebilirsiniz:

Örnek

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Kişisel olarak deneyin

Yol

Görselleri çizmek için kullanılan yaygın yöntemler:

1. Yol başlatmak - beginPath()
2. Bir noktaya gitmek - moveTo()
3. Yol içinde çizim - lineTo()
4. Yol çizgisi - stroke()

Örnek

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Kişisel olarak deneyin