„HTML5-Canvas ctx.fillText kann keinen Zeilenumbruch erreichen“

Die Methode

fillText() zeichnet gefüllten Text auf der Leinwand. Wenn Sie den Text umbrechen möchten, können Sie dies tun, indem Sie den Text in einer neuen Zeile teilen und filltext() mehrmals aufrufen. Auf diese Weise teilen Sie den Text in mehrere Zeilen auf und zeichnen jede Zeile separat.

Sie können versuchen, das folgende Code-Snippet auszuführen: −

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;
}

Das obige ist der detaillierte Inhalt von„HTML5-Canvas ctx.fillText kann keinen Zeilenumbruch erreichen“. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!