'Le canevas HTML5 ctx.fillText ne peut pas réaliser le retour à la ligne'

La méthode

fillText() dessine du texte rempli sur le canevas. Si vous souhaitez envelopper le texte, vous pouvez le faire en divisant le texte sur une nouvelle ligne et en appelant filltext() plusieurs fois. En faisant cela, vous divisez le texte en plusieurs lignes et dessinez chaque ligne séparément.

Vous pouvez essayer d'exécuter l'extrait de code suivant −

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!