Rumah >hujung hadapan web >html tutorial >'HTML5 canvas ctx.fillText tidak boleh mencapai pembalut baris'

'HTML5 canvas ctx.fillText tidak boleh mencapai pembalut baris'

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBke hadapan
2023-09-03 10:53:021696semak imbas

Kaedah

"HTML5 canvas ctx.fillText无法实现换行"

fillText() melukis teks yang diisi pada kanvas. Jika anda ingin membungkus teks, anda boleh melakukannya dengan membelah teks pada baris baharu dan memanggil filltext() beberapa kali. Dengan melakukan ini, anda membahagikan teks kepada beberapa baris dan melukis setiap baris secara berasingan.

Anda boleh cuba jalankan coretan kod berikut −

var c = $('#c')[0].getContext('2d');
c.font = '12px Courier';
alert(c);

var str = 'first line second line...';
var a = 30;
var b = 30;
var lineheight = 15;
var lines = str.split('');

for (var j = 0; j<lines.length; j++)
c.fillText(lines[j], a, b + (j*lineheight) );
// for canvas
<canvas id="c" width="200" height="200"></canvas>

// CSS

canvas {
   background-color: #FFCE9E;
}

Atas ialah kandungan terperinci 'HTML5 canvas ctx.fillText tidak boleh mencapai pembalut baris'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam