En son web geliştirme öğreticiler
 

HTML Tuval Metin


Tuval üzerine Metin Çizim

Bir tuval üzerinde metin çizmek için en önemli özellik ve yöntemler şunlardır:

  • font - metin için yazı tipi özelliklerini tanımlar
  • fillText( text,x,y ) - çizer "filled" tuval üzerine metni
  • strokeText( text,x,y ) - Tuval üzerinde metin çizer (no fill)

Kullanılması fillText()

Örnek

30px için yazı ayarlayın "Arial" ve tuval üzerine doldurulmuş metin yazmak:

Tarayıcınız HTML5 tuval etiketi desteklemez.

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
Kendin dene "

Kullanılması strokeText()

Örnek

30px için yazı ayarlayın "Arial" tuval üzerine, dolgusuz ve metin yazmak:

Tarayıcınız HTML5 tuval etiketi desteklemez.

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
Kendin dene "

Renk ve Merkezi Metni Ekle

Örnek

30px için yazı ayarlayın "Comic Sans MS" ve tuval merkezinde doldurulmuş kırmızı metin yazmak:

Tarayıcınız HTML5 tuval etiketi desteklemez.

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);
Kendin dene "