HTML5 Canvas Metin Dikey Hizalama

Metni HTML5 Canvas ile dikey olarak hizalamak için canvas bağlamındaki textBaseline özelliğini kullanabiliriz. textBaseline, aşağıdaki değerlerden biriyle ayarlanabilir: üst, asılı, orta, alfabetik, ideografik ve alt. Aksi belirtilmedikçe, textBaseline özelliği varsayılan olarak alfabetik olarak ayarlanmıştı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;

    context.font = '30pt Calibri';
    
    context.textAlign = 'center';
    
    context.textBaseline = 'middle';
    context.fillStyle = 'blue';
    context.fillText('Merhaba Dünya!', x, y);
</script>

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

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

var x = canvas.width / 2;

var y = canvas.height / 2;

context.font = '30pt Calibri';

context.textAlign = 'center';

context.textBaseline = 'middle';

context.fillStyle = 'blue';

context.fillText('Merhaba Dünya!', x, y);

</script>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Metin Dikey Hizalama

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap