HTML Kanvas Metni
Tuval Üzerine Metin Çizimi
Bir tuval üzerine metin çizmek için en önemli özellik ve yöntemler şunlardır:
- yazı tipi - metnin yazı tipi özelliklerini tanımlar
- fillText( text,x,y ) - tuval üzerine "dolu" metin çizer
- StrokText( text,x,y ) - tuval üzerine metin çizer (dolgusuz)
fillText()'i kullanma
Örnek
Yazı tipini 30 piksel "Arial" olarak ayarlayın ve tuval üzerine doldurulmuş bir metin yazın:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
StrokText()'i kullanma
Örnek
Yazı tipini 30 piksel "Arial" olarak ayarlayın ve tuval üzerine dolgusuz bir metin yazın:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Renk ve Orta Metin Ekle
Örnek
Yazı tipini 30 piksel "Comic Sans MS" olarak ayarlayın ve tuvalin ortasına doldurulmuş kırmızı bir metin yazın:
JavaScript:
var
canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);