HTML5 Canvas metnini hizalamak için, tuval içeriğinin textAlign özelliğini, başlangıç, son, sol, orta veya sağ olarak ayarlanabilecek şekilde kullanabiliriz. Hizalama, fillText () veya strokeText () tarafından tanımlanan metnin x konumundaki sanal bir dikey çizgiye göredir.
TextAlign özelliği sola ayarlandığında, başlatılacak şekilde ayarlanmış ve belge yönü ltr (soldan sağa) veya bitecek şekilde ayarlandığında ve belge yönü rtl (sağdan sola) olduğunda metin sola hizalanır . TextAlign özelliği sağa ayarlandığında, sona ayarlandığında ve belge yönü ltr olduğunda veya başlamak üzere ayarlandığında ve belge yönü rtl olduğunda, metin sağa hizalanır. Aksi belirtilmedikçe, textAlign özelliği başlatmak için varsayılan olarak ayarlanmıştı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 37 38 39 | <canvas id="canvas" width="578" height="200"></canvas> <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> |
Çıktı 2:
Kod 2:
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 37 38 39 40 41 42 43 44 45 46 47 | <canvas id="canvas" width="578" height="200"></canvas> <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.font = '18px Sans-serif'; context.strokeStyle = 'red'; context.lineWidth = 3; context.strokeText(satir, x, y); context.fillText(satir, x, y); satir = kelimeler[n] + ' '; y += lineHeight; } else { satir = testLine; } } context.font = '18px Sans-serif'; context.strokeStyle = 'red'; context.lineWidth = 3; context.strokeText(satir, x, y); context.fillText(satir, x, y); } </script> |
Yorum Yap