Makale Geçmişi

Canvas etiketi ile metin görüntülemek için kullanılan özellikler ve yöntemler şunlardır. font   fillText   strokeText   textBaseline   textAlign measureText font  Özelliği font  özelliği, metin görüntülemede kullanılacak yazının stilini (kalın / bold, yatık / italic, normal), karakter boyutunu ve yazı tipi adını bildirmek için kullanılır. Değerler tırnak (tek veya çift) içinde aralarına birer boşluk verilerek yazılır. Örnek : ctx.font = "italic 20px Arial"; Örnek 2: ctx.font = "16px 'Courier New'"; fillText  Yöntemi: fillText  yöntemi, dolgu stilini kullanarak içi dolgulu metin görüntüler. Bir sonraki  strokeText  yönteminde göreceğiniz gibi, metinler içi boş olarak da görüntülenebilir. Kullanımı şöyledir: fillText(metin, metnin yatay / x konumu, metnin dikey / y konumu en fazla genişlik); Örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <input type="button" value="Çiz" onclick="ciz()" /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); ctx.fillStyle = "blue"; ctx.font = "bold 20px Arial"; // x=0, y=30 konumunda mavi (dolgu stiliyle) "Merhaba" metnini görüntüle ctx.fillText("Merhaba", 0, 30); } </script> Çıktı şu şekilde olacaktır: strokeText  Yöntemi: strokeText  yöntemi çizgi stilini kullanarak içi boş / kenarlıklı metin görüntülemek için kullanılır. Kullanımı: strokeText(metin, metnin yatay / x konumu, metnin yatay / y konumu, en fazla genişlik); Örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <input type="button" value="Çiz" onclick="ciz()" /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); ctx.strokeStyle = "blue"; ctx.font = "bold 30px Arial"; // x=0, y=30 konumunda mavi (dolgu stiliyle) "Merhaba" metnini görüntüle ctx.strokeText("Merhaba", 0, 30); } </script> Çıktısı şöyle olacaktır: textBaseline  Özelliği: txtBaseline  özelliği metnin verilen konuma göre dikey pozisyonunu belirler. Bu özellik aşağıdaki değerleri alabilir: alphabetic   hanging   bottom   middle   top   Bu değerlerden varsayılan  alphabetic  değeridir. Yani yazılmadığında bu değer kabul edilir. Aşağıdaki şekilde metnin görüntülenmesi için verdiğiniz dikey pozisyonu gri çizginin temsil ettiğini varsaydığınızda verilen değere göre metnin nerede görüntüleneceği gösterilmektedir. textBaseline  özelliğinin varsayılan değeri  alphabetic  olduğundan, eğer bir metni dikey olarak 0 konumunda görüntülemek isterseniz metin görünmez Bunun nedeni şekildeki gri çizginin dikey 0 ( y=0  ) konumunu temsil ettiğini varsayarsak yazının çizginin yani 0. pikselin üstüne yazılması ve dolayısıyla tuvalin dışına çıkmasıdır. Üstteki resimle benzer bir çıktıyı veren örnek: <canvas id="cnTuval" width="450" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");

// Dikey (y) 20 piksel konumunu yatay, gri bir çizgi çiz.
ctx.strokeStyle = "gray";
ctx.beginPath();
ctx.moveTo(0, 20);
ctx.lineTo(600, 20);
ctx.stroke();

ctx.font = "16px Arial";
// textBaseline varsayılan değeri alphabetic olduğundan kullanmadık.
// alttaki satılarda kullanılacak.
ctx.fillText("Alphabetic", 0, 20);

ctx.textBaseline = "hanging";
ctx.fillText("Hanging", 90, 20);

ctx.textBaseline = "bottom";
ctx.fillText("Bottom", 180, 20);

ctx.textBaseline = "middle";
ctx.fillText("Middle", 270, 20);

ctx.textBaseline = "top";
ctx.fillText("Top", 360, 20);

}
</script>
measureText Yöntemi: measureText yöntemi, tuval üzerine çıktı olarak yazılacak metnin yazmadan önce genişliğinin ne olacağını öğrenmek için kullanılır. measureText yöntemi TextMetrics arayüzünü uygulayan bir nesne (object) döndürür. TextMetrics arayüzünde uygulanacak sadece bir tane özellik vardır. O da metnin genişliğini veren width (genişlik) özelliğidir. Yani measureText ile dönen değerin width özelliği ile metin genişliğini öğreniriz. Metnin genişliğini ölçen ve çıktıya yazan örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");

ctx.font = "16px Arial";
ctx.fillText("Merhaba Dünya.", 5, 20);
ctx.fillText("Genişlik: " + ctx.measureText("Merhaba Dünya.").width, 5, 40);

}
</script>
Çıktı şöyle olacaktır: Tuval üzerine yazı yazıldığında yazının tuvalin dışına taşan kısmı görüntülenmez. Dışa taşan yazıya örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");

ctx.font = "16px Arial";
ctx.fillText("Bizim buranın dağlarında karlar uzun süre kalırlar.", 5, 20);

}
</script>
Çıktı şöyle olacaktır: Bunu engellemenin iki yolu vardır. Birinci yol, fillText ve strokeText yöntemlerinin yukarıda bahsedilmeyen "en fazla genişlik" parametresini kullanarak metnin görüntüleneceği maksimum genişliği belirtmektir. Bu özellik Excel'deki "Uyacak şekilde daralt" seçeneğinin yaptığı işe benzer bir şekilde çalışır. Metni belirttiğiniz genişliğe sığacak kadar küçültür. Örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");

ctx.font = "16px Arial";
// Metni en fazla 190 piksel genişliğinde görüntüle
ctx.fillText("Bizim buranın dağlarında karlar uzun süre kalırlar.", 5, 20, 190);

}
</script>
Çıktı şöyle olacaktır: İkinci yol ise metni kelimelere bölüp, her bir kelimenin genişliğini measureText ile öğrenmek ve ona göre kelimeleri ayrı ayrı yazarak kelime kelime çıktıyı oluşturmaktır. Tabi bu iş biraz programlama gerektirir. Bu yöntem de yine Excel'deki "Metni kaydır" seçeneğinin yaptığı işi yapar. Örnek: function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");

var fontBoyutu = 16;
ctx.font = fontBoyutu + "px Arial";

metniKaydir(ctx, // Kapsamı parametre olarak gönder.
"Bizim buranın dağlarında karlar uzun süre kalırlar. Kara kara kargalar karlı iyi tarlalar ararlar. Bitti.",
10, // Metnin sol sınırı
20, // Menin başlayacağı dikey konum (y)
fontBoyutu * 1.5, // Satır yüksekliği (yazı tipi boyutu * 1.5 ile hesaplanır)
190); // Metnin sağ sınırı

}

function metniKaydir(ctx, metin, x, y, satirYuksekligi, maksimumGenislik) {
// Boşluğun genişliğini ölç.
var boslukGenisligi = ctx.measureText(" ").width;

// Metni kelimelere bölerek bir kelime dizisi oluştur.
var kelimeler = metin.split(" ");

// Değişkenleri oluştur va bazılarına başlangıç değerlerini ata.
var sonX = x, sonY = y, genislik;

// Kelime sayısınca bir döngü yap.
for (var i = 0; i < kelimeler.length; i++) {

// i. kelimenin genişliğini ölç.
genislik = ctx.measureText(kelimeler[i]).width;

// Metin yazılan son yatay pozisyona genişliği eklediğimizde maksimum
// genişliği aşıyorsa (yazı sağ sınırın dışına çıkacaksa)...
if (sonX + genislik > maksimumGenislik) {

// Bir satır alta geç (sonY değerini satır yüksekliği kadar arttır).
sonY += satirYuksekligi;

// Son yatay konumu metnin sol sınırına eşitle (satır başı yap)
sonX = x;

}
// Hesaplanan koordinatlara i. kelimeyi yaz.
ctx.fillText(kelimeler[i], sonX, sonY);

// Bir sonraki kelime için, son yatay konumu
// yazılan kelimenin boyu + bir boşluk genişliği kadar arttır.
sonX += genislik + boslukGenisligi;

}
}
</script>
Çıktı şöyledir: textAlign Özelliği: textAlign özelliği görüntülenecek metni verilen konuma hizalamak için kullanılır. Bu özellik aşağıdaki değerleri alabilir. left right center start end Varsayılan start değeridir. Hizalama işlemi fillText veya strokeText ile bildirdiğiniz yatay konuma göre yapılır. Aşağıdaki şekil, yatay konumun mavi çizgi olduğu kabul edildiğinde verilen özellik değerlerine göre metnin nasıl hizalanacağını göstermektedir. Bu resmi oluşturacak çıktı örneği şöyledir: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");

ctx.strokeStyle = "blue";
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.lineTo(100, 200);
ctx.stroke();

ctx.font = "16px Arial";

// start özelliği varsayılan olduğundan ilk seferde vermeye gerek yok.
// ctx.textAlign = "start";
ctx.fillText("start", 100, 20);

ctx.textAlign = "end";
ctx.fillText("end", 100, 50);

ctx.textAlign = "left";
ctx.fillText("left", 100, 80);

ctx.textAlign = "center";
ctx.fillText("center", 100, 110);

ctx.textAlign = "right";
ctx.fillText("right", 100, 140);

}
</script>
Bu kadar. Eksiklik görürseniz lütfen bildirin. İlgili Makaleler HTML5 ve Flash üzerine HTML5 Canvas etiketi ile çizim Canvas etiketine düz çizgilerle çizim yapmak Canvas ile dörtgenler çizmek Canvas ile daire, çember, yay ve dilimler çizmek Canvas ile eğriler çizmek Canvas ile metin görüntüleme  (Bu makale) Canvas çizgi uçları ve çizgi birleşimleri Canvas çizimlerinde tuval durumunu saklama ve geri yükleme Canvas ile gölge efekti oluşturma Canvas ile tuval üzerine resim çizmek Canvas ile degrade / gradient (geçişli renk) dokuları oluşturma Canvas ile dönüşüm işlemleri 1: Tuvali kaydırma ve döndürme Canvas ile dönüşüm işlemleri 2: Ölçekleme Canvas ile dönüşüm işlemleri 3: Transform ile Dönüşüm Canvas ile resim dokusu oluşturma Canvas Clip Yöntemiyle Maskeleme Canvas globalAlpha Özelliği Canvas globalCompositeOperation Özelliği Canvas İle Piksel İşlemleri

Canvas etiketi ile metin görüntülemek için kullanılan özellikler ve yöntemler şunlardır. font   fillText   strokeText   textBaseline   textAlign measureText font  Özelliği font  özelliği, metin görüntülemede kullanılacak yazının stilini (kalın / bold, yatık / italic, normal), karakter boyutunu ve yazı tipi adını bildirmek için kullanılır. Değerler tırnak (tek veya çift) içinde aralarına birer boşluk verilerek yazılır. Örnek : ctx.font = "italic 20px Arial"; Örnek 2: ctx.font = "16px 'Courier New'"; fillText  Yöntemi: fillText  yöntemi, dolgu stilini kullanarak içi dolgulu metin görüntüler. Bir sonraki  strokeText  yönteminde göreceğiniz gibi, metinler içi boş olarak da görüntülenebilir. Kullanımı şöyledir: fillText(metin, metnin yatay / x konumu, metnin dikey / y konumu en fazla genişlik); Örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <input type="button" value="Çiz" onclick="ciz()" /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); ctx.fillStyle = "blue"; ctx.font = "bold 20px Arial"; // x=0, y=30 konumunda mavi (dolgu stiliyle) "Merhaba" metnini görüntüle ctx.fillText("Merhaba", 0, 30); } </script> Çıktı şu şekilde olacaktır: strokeText  Yöntemi: strokeText  yöntemi çizgi stilini kullanarak içi boş / kenarlıklı metin görüntülemek için kullanılır. Kullanımı: strokeText(metin, metnin yatay / x konumu, metnin yatay / y konumu, en fazla genişlik); Örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <input type="button" value="Çiz" onclick="ciz()" /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); ctx.strokeStyle = "blue"; ctx.font = "bold 30px Arial"; // x=0, y=30 konumunda mavi (dolgu stiliyle) "Merhaba" metnini görüntüle ctx.strokeText("Merhaba", 0, 30); } </script> Çıktısı şöyle olacaktır: textBaseline  Özelliği: txtBaseline  özelliği metnin verilen konuma göre dikey pozisyonunu belirler. Bu özellik aşağıdaki değerleri alabilir: alphabetic   hanging   bottom   middle   top   Bu değerlerden varsayılan  alphabetic  değeridir. Yani yazılmadığında bu değer kabul edilir. Aşağıdaki şekilde metnin görüntülenmesi için verdiğiniz dikey pozisyonu gri çizginin temsil ettiğini varsaydığınızda verilen değere göre metnin nerede görüntüleneceği gösterilmektedir. textBaseline  özelliğinin varsayılan değeri  alphabetic  olduğundan, eğer bir metni dikey olarak 0 konumunda görüntülemek isterseniz metin görünmez Bunun nedeni şekildeki gri çizginin dikey 0 ( y=0  ) konumunu temsil ettiğini varsayarsak yazının çizginin yani 0. pikselin üstüne yazılması ve dolayısıyla tuvalin dışına çıkmasıdır. Üstteki resimle benzer bir çıktıyı veren örnek: <canvas id="cnTuval" width="450" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <input type="button" value="Çiz" onclick="ciz()" /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); // Dikey (y) 20 piksel konumunu yatay, gri bir çizgi çiz. ctx.strokeStyle = "gray"; ctx.beginPath(); ctx.moveTo(0, 20); ctx.lineTo(600, 20); ctx.stroke(); ctx.font = "16px Arial"; // textBaseline varsayılan değeri alphabetic olduğundan kullanmadık. // alttaki satılarda kullanılacak. ctx.fillText("Alphabetic", 0, 20); ctx.textBaseline = "hanging"; ctx.fillText("Hanging", 90, 20); ctx.textBaseline = "bottom"; ctx.fillText("Bottom", 180, 20); ctx.textBaseline = "middle"; ctx.fillText("Middle", 270, 20); ctx.textBaseline = "top"; ctx.fillText("Top", 360, 20); } </script> measureText Yöntemi: measureText yöntemi, tuval üzerine çıktı olarak yazılacak metnin yazmadan önce genişliğinin ne olacağını öğrenmek için kullanılır. measureText yöntemi TextMetrics arayüzünü uygulayan bir nesne (object) döndürür. TextMetrics arayüzünde uygulanacak sadece bir tane özellik vardır. O da metnin genişliğini veren width (genişlik) özelliğidir. Yani measureText ile dönen değerin width özelliği ile metin genişliğini öğreniriz. Metnin genişliğini ölçen ve çıktıya yazan örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <input type="button" value="Çiz" onclick="ciz()" /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); ctx.font = "16px Arial"; ctx.fillText("Merhaba Dünya.", 5, 20); ctx.fillText("Genişlik: " + ctx.measureText("Merhaba Dünya.").width, 5, 40); } </script> Çıktı şöyle olacaktır: Tuval üzerine yazı yazıldığında yazının tuvalin dışına taşan kısmı görüntülenmez. Dışa taşan yazıya örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <input type="button" value="Çiz" onclick="ciz()" /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); ctx.font = "16px Arial"; ctx.fillText("Bizim buranın dağlarında karlar uzun süre kalırlar.", 5, 20); } </script> Çıktı şöyle olacaktır: Bunu engellemenin iki yolu vardır. Birinci yol, fillText ve strokeText yöntemlerinin yukarıda bahsedilmeyen "en fazla genişlik" parametresini kullanarak metnin görüntüleneceği maksimum genişliği belirtmektir. Bu özellik Excel'deki "Uyacak şekilde daralt" seçeneğinin yaptığı işe benzer bir şekilde çalışır. Metni belirttiğiniz genişliğe sığacak kadar küçültür. Örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <input type="button" value="Çiz" onclick="ciz()" /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); ctx.font = "16px Arial"; // Metni en fazla 190 piksel genişliğinde görüntüle ctx.fillText("Bizim buranın dağlarında karlar uzun süre kalırlar.", 5, 20, 190 ); } </script> Çıktı şöyle olacaktır: İkinci yol ise metni kelimelere bölüp, her bir kelimenin genişliğini measureText ile öğrenmek ve ona göre kelimeleri ayrı ayrı yazarak kelime kelime çıktıyı oluşturmaktır. Tabi bu iş biraz programlama gerektirir. Bu yöntem de yine Excel'deki "Metni kaydır" seçeneğinin yaptığı işi yapar. Örnek: function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); var fontBoyutu = 16; ctx.font = fontBoyutu + "px Arial"; metniKaydir(ctx, // Kapsamı parametre olarak gönder. "Bizim buranın dağlarında karlar uzun süre kalırlar. Kara kara kargalar karlı iyi tarlalar ararlar. Bitti.", 10, // Metnin sol sınırı 20, // Menin başlayacağı dikey konum (y) fontBoyutu * 1.5, // Satır yüksekliği (yazı tipi boyutu * 1.5 ile hesaplanır) 190); // Metnin sağ sınırı } function metniKaydir(ctx, metin, x, y, satirYuksekligi, maksimumGenislik) { // Boşluğun genişliğini ölç. var boslukGenisligi = ctx.measureText(" ").width; // Metni kelimelere bölerek bir kelime dizisi oluştur. var kelimeler = metin.split(" "); // Değişkenleri oluştur va bazılarına başlangıç değerlerini ata. var sonX = x, sonY = y, genislik; // Kelime sayısınca bir döngü yap. for (var i = 0; i < kelimeler.length; i++) { // i. kelimenin genişliğini ölç. genislik = ctx.measureText(kelimeler[i]).width; // Metin yazılan son yatay pozisyona genişliği eklediğimizde maksimum // genişliği aşıyorsa (yazı sağ sınırın dışına çıkacaksa)... if (sonX + genislik > maksimumGenislik) { // Bir satır alta geç (sonY değerini satır yüksekliği kadar arttır). sonY += satirYuksekligi; // Son yatay konumu metnin sol sınırına eşitle (satır başı yap) sonX = x; } // Hesaplanan koordinatlara i. kelimeyi yaz. ctx.fillText(kelimeler[i], sonX, sonY); // Bir sonraki kelime için, son yatay konumu // yazılan kelimenin boyu + bir boşluk genişliği kadar arttır. sonX += genislik + boslukGenisligi; } } </script> Çıktı şöyledir: textAlign Özelliği: textAlign özelliği görüntülenecek metni verilen konuma hizalamak için kullanılır. Bu özellik aşağıdaki değerleri alabilir. left right center start end Varsayılan start değeridir. Hizalama işlemi fillText veya strokeText ile bildirdiğiniz yatay konuma göre yapılır. Aşağıdaki şekil, yatay konumun mavi çizgi olduğu kabul edildiğinde verilen özellik değerlerine göre metnin nasıl hizalanacağını göstermektedir. Bu resmi oluşturacak çıktı örneği şöyledir: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <input type="button" value="Çiz" onclick="ciz()" /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); ctx.strokeStyle = "blue"; ctx.beginPath(); ctx.moveTo(100, 0); ctx.lineTo(100, 200); ctx.stroke(); ctx.font = "16px Arial"; // start özelliği varsayılan olduğundan ilk seferde vermeye gerek yok. // ctx.textAlign = "start"; ctx.fillText("start", 100, 20); ctx.textAlign = "end"; ctx.fillText("end", 100, 50); ctx.textAlign = "left"; ctx.fillText("left", 100, 80); ctx.textAlign = "center"; ctx.fillText("center", 100, 110); ctx.textAlign = "right"; ctx.fillText("right", 100, 140); } </script> Bu kadar. Eksiklik görürseniz lütfen bildirin. Canvas üzerine çizim ile ilgili diğer makaleler için tıklayın.