HTML5 Canvas Metin Uzunluğu

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:


<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>

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>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Metin Uzunluğu

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap