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

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

WBOY
Lepaskan: 2023-09-03 10:53:02
ke hadapan
1416 orang telah melayarinya

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) );
Salin selepas log masuk
// for canvas
<canvas id="c" width="200" height="200"></canvas>
Salin selepas log masuk

// CSS

canvas {
   background-color: #FFCE9E;
}
Salin selepas log masuk

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!

sumber:tutorialspoint.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan