HTML Canvas Metni

Ekran üzerinde metin çizmek

Ekran üzerinde metin çizmek için en önemli özellik ve yöntemler:

• font - Metnin yazı tipi özelliklerini tanımlar
• fillText(text,x,y) - Doldurulmuş metni ekran üzerinde çizer
• strokeText(text,x,y) - Doldurulmamış metni ekran üzerinde çizer

fillText() kullanarak

Örnek

Metni "30px Arial" olarak ayarlayın ve doldurulmuş metni ekran üzerinde yazın:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Merhaba Dünya", 10, 50);

Kişisel olarak deneyin

strokeText() kullanarak

Örnek

Metni "30px Arial" olarak ayarlayın ve doldurulmamış metni ekran üzerinde yazın:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Merhaba Dünya", 10, 50);

Kişisel olarak deneyin

Renk ekleyin ve metni merkeze alın

Örnek

Metni "30px Comic Sans MS" olarak ayarlayın ve doldurulmuş kırmızı metni ekran ortasında yazın:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "kırmızı";
ctx.textAlign = "merkez";
ctx.fillText("Merhaba Dünya", canvas.width/2, canvas.height/2);

Kişisel olarak deneyin

Ayrıca bkz:

CodeW3C.com'nun Tam Canvas Referans Kılavuzu