Canvas API

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

Canvas API, JavaScript'in kanvada grafik çizmesine izin verir.

Canvas API, şekiller, çizgiler, eğriler, kutular, metin ve görseller, renk, döndürme, şeffaflık ve diğer piksel işlemleri çizmek için kullanılabilir.

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öntemiyle getElementById() kullanarak <canvas> elementine erişebilirsiniz:

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

Canvas üzerinde çizim yapmak için 2D kontekst nesnesi oluşturmanız gerekir:

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

Notlar

HTML <canvas> elementi kendisi çizim özelliğine sahiptir.

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

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

Canvas üzerinde çizim

2D kontekst nesnesi oluşturduktan sonra, canvas üzerinde çizim yapabilirsiniz.

Aşağıdaki fillRect() yöntemi, sol üst köşesi 20,20 konumunda olan ve 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 ve mevcut HTML sayfasına eklemek için document.createElement() yöntemini kullanabilirsiniz:

Ö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

Canvas üzerinde çizim için yaygın yöntemler:

1. Yol başlat - beginPath()
2. Bir noktaya taşınır - moveTo()
3. Yol içinde çizer - 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