HTML5 Canvas Ders-26 Metin Genişliklerini Bulmak - measureText
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

HTML5 Canvas Ders-26 Metin Genişliklerini Bulmak - measureText

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(1814)
RAPOR ET
HTML5 canvas derslerimize devam ediyoruz.Bu derste fillText ile ekrana bastığımız metnin genişliğini bulmayı göreceğiz.Bunun için kullanacağımız komut measureText .MeasureText tuvalde belirlediğimiz font tipi,büyüklüğünü vs göz önüne alarak kaç px genişliğinde olacağını bulur.Buda bize net bir rakam verdiği için kolaylık sağlar projelerimizde.Kullanımına geçelim.

 var uzunluk=cizim.measureText(metin).width;

Bu şekilde genişliğini bulup değişkene atıyoruz.Font ayarlarını yaptıktan sonra veriyi almak gerekir.

Genel örnek :
<!DOCTYPE HTML>

<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
#canvas{border:2px solid #ddd;}
</style>
</head>
<body>

<canvas id="canvas" width="600" height="200"></canvas>

<script type="text/javascript">

var canvas = document.getElementById('canvas');
var cizim = canvas.getContext('2d');

cizim.font = 'normal 30pt Arial';
cizim.textAlign='center';
cizim.fillStyle='firebrick';
var metin="UstaDerslik";
var uzunluk=cizim.measureText(metin).width;
cizim.fillText(metin+"-"+uzunluk+"px",300,100);

</script>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/yt23s2ds.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol