HTML5 Canvas metninin metin uzunluğunu elde etmek için, genişlik içeriğini içeren bir nesneyi döndüren canvas bağlamının measureText() yöntemini kullanabiliriz. Bu yöntem bir metin dizesi gerektirir ve sağlanan metne ve içeriğe atanan geçerli metin yazı tipine bağlı olarak bir metrik nesnesi döndürür.
Çıktı:
Kod:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<canvas id="canvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var x = canvas.width / 2; var y = canvas.height / 2 - 10; var text = 'Merhaba Dünya!'; context.font = '30pt Calibri'; context.textAlign = 'center'; context.fillStyle = 'blue'; context.fillText(text, x, y); // uzunluğu getir. var metrics = context.measureText(text); var width = metrics.width; context.font = '20pt Calibri'; context.textAlign = 'center'; context.fillStyle = '#555'; context.fillText('(yazı genişliği:' + width + 'px)', x, y + 40); </script> |
Add comment