HTML canvas fillText() Yöntem

❮ HTML Kanvas Referansı

Örnek

"Merhaba dünya!" yaz. ve "Kocaman bir gülümseme!" (gradyan ile) tuval üzerinde fillText() kullanarak:

TarayıcınızHTML5tuval etiketini desteklemiyor.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.font = "20px Georgia";
ctx.fillText("Hello World!", 10, 50);

ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0"," magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Big smile!", 10, 90);

Tarayıcı Desteği

Tablodaki sayılar, yöntemi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Method
fillText() Yes 9.0 Yes Yes Yes

Not: maxWidth parametresi Safari 5.1 ve önceki sürümlerde desteklenmez.


Tanım ve Kullanım

fillText() yöntemi, tuval üzerine doldurulmuş metin çizer. Metnin varsayılan rengi siyahtır.

İpucu: Yazı tipini ve yazı tipi boyutunu belirtmek için yazı tipi özelliğini kullanın ve metni başka bir renkte/degradede işlemek için fillStyle özelliğini kullanın.

JavaScript sözdizimi: bağlam .fillText( metin,x,y,maxWidth );

Parametre Değerleri

Parameter Description Play it
text Specifies the text that will be written on the canvas
x The x coordinate where to start painting the text (relative to the canvas)
y The y coordinate where to start painting the text (relative to the canvas)
maxWidth Optional. The maximum allowed width of the text, in pixels

❮ HTML Kanvas Referansı