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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<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> |
Add comment