HTML5 Canvas Metin Bölme

HTML5 Canvas ile metin kaydırmak için, tuval bağlamı, bir metin dizesi, bir konum, bir maksimum genişlik ve bir satır yüksekliği gerektiren özel bir işlev oluşturabiliriz. İşlev, bir sonraki satırın ne zaman sarılması gerektiğini hesaplamak için canvas bağlamının measureText() yöntemini kullanmalıdır.

Çıktı:

Kod:


<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var maxWidth = 400;
    var lineHeight = 24;
    var x = 250
    var y = 60;
    var text = 'Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.';
    
    context.font = '15pt Calibri';
    context.fillStyle = '#333';
    
    metinBol(context, text, x, y, maxWidth, lineHeight);
    
    function metinBol(context, metin, x, y, maxWidth, lineHeight) {
        var kelimeler = metin.split(' ');
        var satir = '';
    
        for(var n = 0; n < kelimeler.length; n++) {
            var testLine = satir + kelimeler[n] + ' ';
            var metrics = context.measureText(testLine);
            var testWidth = metrics.width;
            context.textAlign='center' //metin hizalama left,right, center
            if (testWidth > maxWidth && n > 0) {
            context.fillText(satir, x, y);
            satir = kelimeler[n] + ' ';
            y += lineHeight;
            }
            else {
            satir = testLine;
            }
        }
        context.fillText(satir, x, y);
        }
        
</script>

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

var maxWidth = 400;

var lineHeight = 24;

var x = 250

var y = 60;

var text = 'Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.';

context.font = '15pt Calibri';

context.fillStyle = '#333';

metinBol(context, text, x, y, maxWidth, lineHeight);

function metinBol(context, metin, x, y, maxWidth, lineHeight) {

var kelimeler = metin.split(' ');

var satir = '';

for(var n = 0; n < kelimeler.length; n++) {

var testLine = satir + kelimeler[n] + ' ';

var metrics = context.measureText(testLine);

var testWidth = metrics.width;

context.textAlign='center' //metin hizalama left,right, center

if (testWidth > maxWidth && n > 0) {

context.fillText(satir, x, y);

satir = kelimeler[n] + ' ';

y += lineHeight;

}

else {

satir = testLine;

}

context.fillText(satir, x, y);

}

</script>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Metin Bölme

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap