HTML5キャンバスctx.fillTextは改行をしませんか？
テキストに「\ n」が含まれている場合、キャンバスにテキストを追加できないようです。つまり、改行は表示/動作しません。
ctxPaint.fillText("s ome \n \\n <br/> thing", x, y);
上記のコードは"s ome \n <br/> thing"、1行。
これはfillTextの制限ですか、それとも間違っていますか？ 「\ n」はそこにあり、印刷されませんが、機能しません。
CanvasのfillTextの制限だと思います。複数行のサポートはありません。さらに悪いことに、行の高さを測定する組み込みの方法はなく、幅だけを測定するため、自分でそれを行うのがさらに難しくなります！
多くの人が独自の複数行サポートを書いています。おそらく最も有名なプロジェクトは Mozilla Skywriter です。
あなたがする必要があることの要点は、毎回y値にテキストの高さを追加しながら、複数のfillText呼び出しです。 （Mの幅を測定することは、スカイライターの人々がテキストに近づけるために行うことだと思います。）
テキスト内の改行文字だけを処理したい場合は、改行でテキストを分割し、fillText()を複数回呼び出すことでシミュレートできます。
http://jsfiddle.net/BaG4J/1/ のようなもの
_var c = document.getElementById('c').getContext('2d');
c.font = '11px Courier';
console.log(c);
var txt = 'line 1\nline 2\nthird line..';
var x = 30;
var y = 30;
var lineheight = 15;
var lines = txt.split('\n');
for (var i = 0; i<lines.length; i++)
c.fillText(lines[i], x, y + (i*lineheight) );__canvas{background-color:#ccc;}__<canvas id="c" width="150" height="150"></canvas>_概念実証のラッピングを作成しました（指定した幅で絶対にラップします。まだ単語の区切りはありません）
http://jsfiddle.net/BaG4J/2/ の例
_var c = document.getElementById('c').getContext('2d');
c.font = '11px Courier';
var txt = 'this is a very long text to print';
printAt(c, txt, 10, 20, 15, 90 );
function printAt( context , text, x, y, lineHeight, fitWidth)
{
fitWidth = fitWidth || 0;
if (fitWidth <= 0)
{
context.fillText( text, x, y );
return;
}
for (var idx = 1; idx <= text.length; idx++)
{
var str = text.substr(0, idx);
console.log(str, context.measureText(str).width, fitWidth);
if (context.measureText(str).width > fitWidth)
{
context.fillText( text.substr(0, idx-1), x, y );
printAt(context, text.substr(idx-1), x, y + lineHeight, lineHeight, fitWidth);
return;
}
}
context.fillText( text, x, y );
}__canvas{background-color:#ccc;}__<canvas id="c" width="150" height="150"></canvas>_そして、単語の折り返し（のスペースで分割する）概念実証。
http://jsfiddle.net/BaG4J/5/ の例
_var c = document.getElementById('c').getContext('2d');
c.font = '11px Courier';
var txt = 'this is a very long text. Some more to print!';
printAtWordWrap(c, txt, 10, 20, 15, 90 );
function printAtWordWrap( context , text, x, y, lineHeight, fitWidth)
{
fitWidth = fitWidth || 0;
if (fitWidth <= 0)
{
context.fillText( text, x, y );
return;
}
var words = text.split(' ');
var currentLine = 0;
var idx = 1;
while (words.length > 0 && idx <= words.length)
{
var str = words.slice(0,idx).join(' ');
var w = context.measureText(str).width;
if ( w > fitWidth )
{
if (idx==1)
{
idx=2;
}
context.fillText( words.slice(0,idx-1).join(' '), x, y + (lineHeight*currentLine) );
currentLine++;
words = words.splice(idx-1);
idx = 1;
}
else
{idx++;}
}
if (idx > 0)
context.fillText( words.join(' '), x, y + (lineHeight*currentLine) );
}__canvas{background-color:#ccc;}__<canvas id="c" width="150" height="150"></canvas>_2番目と3番目の例では、 （measureText() メソッドを使用しています。これは、ピクセル単位の長さ（）を示しています ）文字列が印刷されます。
たぶんこのパーティーに少し遅れて来たのかもしれませんが、キャンバスにテキストを完璧にラップするための次のチュートリアルを見つけました。
http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/
それから、複数の回線を機能させることができたと思いました（ラミレス、申し訳ありませんが、私にとってはうまくいきませんでした！）。テキストをキャンバスにラップする完全なコードは次のとおりです。
<script type="text/javascript">
// http: //www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var cars = text.split("\n");
for (var ii = 0; ii < cars.length; ii++) {
var line = "";
var words = cars[ii].split(" ");
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + " ";
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth) {
context.fillText(line, x, y);
line = words[n] + " ";
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
y += lineHeight;
}
}
function DrawText() {
var canvas = document.getElementById("c");
var context = canvas.getContext("2d");
context.clearRect(0, 0, 500, 600);
var maxWidth = 400;
var lineHeight = 60;
var x = 20; // (canvas.width - maxWidth) / 2;
var y = 58;
var text = document.getElementById("text").value.toUpperCase();
context.fillStyle = "rgba(255, 0, 0, 1)";
context.fillRect(0, 0, 600, 500);
context.font = "51px 'LeagueGothicRegular'";
context.fillStyle = "#333";
wrapText(context, text, x, y, maxWidth, lineHeight);
}
$(document).ready(function () {
$("#text").keyup(function () {
DrawText();
});
});
</script>
cはキャンバスのID、textはテキストボックスのIDです。
おわかりのように、標準ではないフォントを使用しています。キャンバスを操作する前にテキストでフォントを使用している限り、@ font-faceを使用できます。そうしないと、キャンバスはフォントを取得しません。
これが誰かを助けることを願っています。
テキストを行に分割し、それぞれを個別に描画します。
function fillTextMultiLine(ctx, text, x, y) {
var lineHeight = ctx.measureText("M").width * 1.2;
var lines = text.split("\n");
for (var i = 0; i < lines.length; ++i) {
ctx.fillText(lines[i], x, y);
y += lineHeight;
}
}
ここで紹介した人気のwrapText（）関数を変更する私のソリューションです。 JavaScriptのプロトタイピング機能を使用しているため、キャンバスコンテキストから関数を呼び出すことができます。
CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {
var lines = text.split("\n");
for (var i = 0; i < lines.length; i++) {
var words = lines[i].split(' ');
var line = '';
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = this.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
this.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
this.fillText(line, x, y);
y += lineHeight;
}
}
基本的な使用法：
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "black";
ctx.font = "12px sans-serif";
ctx.textBaseline = "top";
ctx.wrapText("Hello\nWorld!",20,20,160,16);
ここに私がまとめたデモンストレーションがあります： http://jsfiddle.net/7RdbL/
CanvasRenderingContext2Dを拡張して、mlFillTextとmlStrokeTextの2つの関数を追加しました。
最後のバージョンは GitHub で見つけることができます：
この機能を使用すると、ボックス内にミルティリンテキストを入力/ストロークできます。テキストを垂直方向と水平方向に揃えることができます。 （アカウントの\ nを考慮し、テキストを正当化することもできます）。
プロトタイプは次のとおりです。
関数mlFillText（text、x、y、w、h、vAlign、hAlign、lineheight）;関数mlStrokeText（text、x、y、w、h、vAlign、hAlign、lineheight）;
VAlignは、「top」、「center」、または「button」です。hAlignは、「left」、「center」、「right」、または「justify」です。
ここでライブラリをテストできます： http://jsfiddle.net/4WRZj/1/
ライブラリのコードは次のとおりです。
// Library: mltext.js
// Desciption: Extends the CanvasRenderingContext2D that adds two functions: mlFillText and mlStrokeText.
//
// The prototypes are:
//
// function mlFillText(text,x,y,w,h,vAlign,hAlign,lineheight);
// function mlStrokeText(text,x,y,w,h,vAlign,hAlign,lineheight);
//
// Where vAlign can be: "top", "center" or "button"
// And hAlign can be: "left", "center", "right" or "justify"
// Author: Jordi Baylina. (baylina at uniclau.com)
// License: GPL
// Date: 2013-02-21
function mlFunction(text, x, y, w, h, hAlign, vAlign, lineheight, fn) {
text = text.replace(/[\n]/g, " \n ");
text = text.replace(/\r/g, "");
var words = text.split(/[ ]+/);
var sp = this.measureText(' ').width;
var lines = [];
var actualline = 0;
var actualsize = 0;
var wo;
lines[actualline] = {};
lines[actualline].Words = [];
i = 0;
while (i < words.length) {
var Word = words[i];
if (Word == "\n") {
lines[actualline].EndParagraph = true;
actualline++;
actualsize = 0;
lines[actualline] = {};
lines[actualline].Words = [];
i++;
} else {
wo = {};
wo.l = this.measureText(Word).width;
if (actualsize === 0) {
while (wo.l > w) {
Word = Word.slice(0, Word.length - 1);
wo.l = this.measureText(Word).width;
}
if (Word === "") return; // I can't fill a single character
wo.Word = Word;
lines[actualline].Words.Push(wo);
actualsize = wo.l;
if (Word != words[i]) {
words[i] = words[i].slice(Word.length, words[i].length);
} else {
i++;
}
} else {
if (actualsize + sp + wo.l > w) {
lines[actualline].EndParagraph = false;
actualline++;
actualsize = 0;
lines[actualline] = {};
lines[actualline].Words = [];
} else {
wo.Word = Word;
lines[actualline].Words.Push(wo);
actualsize += sp + wo.l;
i++;
}
}
}
}
if (actualsize === 0) lines[actualline].pop();
lines[actualline].EndParagraph = true;
var totalH = lineheight * lines.length;
while (totalH > h) {
lines.pop();
totalH = lineheight * lines.length;
}
var yy;
if (vAlign == "bottom") {
yy = y + h - totalH + lineheight;
} else if (vAlign == "center") {
yy = y + h / 2 - totalH / 2 + lineheight;
} else {
yy = y + lineheight;
}
var oldTextAlign = this.textAlign;
this.textAlign = "left";
for (var li in lines) {
var totallen = 0;
var xx, usp;
for (wo in lines[li].Words) totallen += lines[li].Words[wo].l;
if (hAlign == "center") {
usp = sp;
xx = x + w / 2 - (totallen + sp * (lines[li].Words.length - 1)) / 2;
} else if ((hAlign == "justify") && (!lines[li].EndParagraph)) {
xx = x;
usp = (w - totallen) / (lines[li].Words.length - 1);
} else if (hAlign == "right") {
xx = x + w - (totallen + sp * (lines[li].Words.length - 1));
usp = sp;
} else { // left
xx = x;
usp = sp;
}
for (wo in lines[li].Words) {
if (fn == "fillText") {
this.fillText(lines[li].Words[wo].Word, xx, yy);
} else if (fn == "strokeText") {
this.strokeText(lines[li].Words[wo].Word, xx, yy);
}
xx += lines[li].Words[wo].l + usp;
}
yy += lineheight;
}
this.textAlign = oldTextAlign;
}
(function mlInit() {
CanvasRenderingContext2D.prototype.mlFunction = mlFunction;
CanvasRenderingContext2D.prototype.mlFillText = function (text, x, y, w, h, vAlign, hAlign, lineheight) {
this.mlFunction(text, x, y, w, h, hAlign, vAlign, lineheight, "fillText");
};
CanvasRenderingContext2D.prototype.mlStrokeText = function (text, x, y, w, h, vAlign, hAlign, lineheight) {
this.mlFunction(text, x, y, w, h, hAlign, vAlign, lineheight, "strokeText");
};
})();
そして、これが使用例です：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var T = "This is a very long line line with a CR at the end.\n This is the second line.\nAnd this is the last line.";
var lh = 12;
ctx.lineWidth = 1;
ctx.mlFillText(T, 10, 10, 100, 100, 'top', 'left', lh);
ctx.strokeRect(10, 10, 100, 100);
ctx.mlFillText(T, 110, 10, 100, 100, 'top', 'center', lh);
ctx.strokeRect(110, 10, 100, 100);
ctx.mlFillText(T, 210, 10, 100, 100, 'top', 'right', lh);
ctx.strokeRect(210, 10, 100, 100);
ctx.mlFillText(T, 310, 10, 100, 100, 'top', 'justify', lh);
ctx.strokeRect(310, 10, 100, 100);
ctx.mlFillText(T, 10, 110, 100, 100, 'center', 'left', lh);
ctx.strokeRect(10, 110, 100, 100);
ctx.mlFillText(T, 110, 110, 100, 100, 'center', 'center', lh);
ctx.strokeRect(110, 110, 100, 100);
ctx.mlFillText(T, 210, 110, 100, 100, 'center', 'right', lh);
ctx.strokeRect(210, 110, 100, 100);
ctx.mlFillText(T, 310, 110, 100, 100, 'center', 'justify', lh);
ctx.strokeRect(310, 110, 100, 100);
ctx.mlFillText(T, 10, 210, 100, 100, 'bottom', 'left', lh);
ctx.strokeRect(10, 210, 100, 100);
ctx.mlFillText(T, 110, 210, 100, 100, 'bottom', 'center', lh);
ctx.strokeRect(110, 210, 100, 100);
ctx.mlFillText(T, 210, 210, 100, 100, 'bottom', 'right', lh);
ctx.strokeRect(210, 210, 100, 100);
ctx.mlFillText(T, 310, 210, 100, 100, 'bottom', 'justify', lh);
ctx.strokeRect(310, 210, 100, 100);
ctx.mlStrokeText("Yo can also use mlStrokeText!", 0 , 310 , 420, 30, 'center', 'center', lh);
JavaScriptを使用して、ソリューションを開発しました。それは美しくはありませんが、私にとってはうまくいきました：
function drawMultilineText(){
// set context and formatting
var context = document.getElementById("canvas").getContext('2d');
context.font = fontStyleStr;
context.textAlign = "center";
context.textBaseline = "top";
context.fillStyle = "#000000";
// prepare textarea value to be drawn as multiline text.
var textval = document.getElementByID("textarea").value;
var textvalArr = toMultiLine(textval);
var linespacing = 25;
var startX = 0;
var startY = 0;
// draw each line on canvas.
for(var i = 0; i < textvalArr.length; i++){
context.fillText(textvalArr[i], x, y);
y += linespacing;
}
}
// Creates an array where the <br/> tag splits the values.
function toMultiLine(text){
var textArr = new Array();
text = text.replace(/\n\r?/g, '<br/>');
textArr = text.split("<br/>");
return textArr;
}
お役に立てば幸いです！
@ Gaby Petrioli が提供するワードラッピング（スペースで分割）のコードは非常に役立ちます。改行文字_\n_のサポートを提供するために、彼のコードを拡張しました。また、多くの場合、バウンディングボックスのサイズがあると便利なので、multiMeasureText()は幅と高さの両方を返します。
ここでコードを見ることができます： http://jsfiddle.net/jeffchan/WHgaY/76/
2行のテキストのみが必要な場合は、それらを2つの異なるfillText呼び出しに分割し、それぞれに異なるベースラインを与えることができます。
ctx.textBaseline="bottom";
ctx.fillText("First line", x-position, y-position);
ctx.textBaseline="top";
ctx.fillText("Second line", x-position, y-position);
以下は、ColinのwrapText()のバージョンで、垂直中央揃えテキスト with context.textBaseline = 'middle'：
var wrapText = function (context, text, x, y, maxWidth, lineHeight) {
var paragraphs = text.split("\n");
var textLines = [];
// Loop through paragraphs
for (var p = 0; p < paragraphs.length; p++) {
var line = "";
var words = paragraphs[p].split(" ");
// Loop through words
for (var w = 0; w < words.length; w++) {
var testLine = line + words[w] + " ";
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
// Make a line break if line is too long
if (testWidth > maxWidth) {
textLines.Push(line.trim());
line = words[w] + " ";
}
else {
line = testLine;
}
}
textLines.Push(line.trim());
}
// Move text up if centered vertically
if (context.textBaseline === 'middle')
y = y - ((textLines.length-1) * lineHeight) / 2;
// Render text on canvas
for (var tl = 0; tl < textLines.length; tl++) {
context.fillText(textLines[tl], x, y);
y += lineHeight;
}
};
あなたはまだCSSに頼ることができると思います
ctx.measureText().height doesn’t exist.
幸いなことに、CSS hack-ardry（CSS測定を使用する古い実装を修正する他の方法については、「Typographic Metrics」を参照）を使用して、同じfont-propertiesでaのoffsetHeightを測定することでテキストの高さを見つけることができます：
var d = document.createElement(”span”);
d.font = “20px arial”
d.textContent = “Hello world!”
var emHeight = d.offsetHeight;
from： http://www.html5rocks.com/en/tutorials/canvas/texteffects/
私もこれは不可能だとは思いませんが、これを回避するには<p>elementを作成し、JavaScriptで配置します。
私は同じ問題を抱えているため、これに出くわしました。私は可変フォントサイズで作業しているので、これはそれを考慮しています：
var texts=($(this).find('.noteContent').html()).split("<br>");
for (var k in texts) {
ctx.fillText(texts[k], left, (top+((parseInt(ctx.font)+2)*k)));
}
ここで、.noteContentはユーザーが編集したcontenteditable div（これはjQuery各関数にネストされています）、ctx.fontは「14px Arial」です（ピクセルサイズが最初に来ることに注意してください）
Canvas要素は、改行 '\ n'、タブ '\ t'または<br />タグなどの文字をサポートしていません。
それを試してみてください：
var newrow = mheight + 30;
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "bold 24px 'Verdana'";
ctx.textAlign = "center";
ctx.fillText("Game Over", mwidth, mheight); //first line
ctx.fillText("play again", mwidth, newrow); //second line
またはおそらく複数行：
var textArray = new Array('line2', 'line3', 'line4', 'line5');
var rows = 98;
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "bold 24px 'Verdana'";
ctx.textAlign = "center";
ctx.fillText("Game Over", mwidth, mheight); //first line
for(var i=0; i < textArray.length; ++i) {
rows += 30;
ctx.fillText(textArray[i], mwidth, rows);
}
問題に対する私のES5ソリューション：
var wrap_text = (ctx, text, x, y, lineHeight, maxWidth, textAlign) => {
if(!textAlign) textAlign = 'center'
ctx.textAlign = textAlign
var words = text.split(' ')
var lines = []
var sliceFrom = 0
for(var i = 0; i < words.length; i++) {
var chunk = words.slice(sliceFrom, i).join(' ')
var last = i === words.length - 1
var bigger = ctx.measureText(chunk).width > maxWidth
if(bigger) {
lines.Push(words.slice(sliceFrom, i).join(' '))
sliceFrom = i
}
if(last) {
lines.Push(words.slice(sliceFrom, words.length).join(' '))
sliceFrom = i
}
}
var offsetY = 0
var offsetX = 0
if(textAlign === 'center') offsetX = maxWidth / 2
for(var i = 0; i < lines.length; i++) {
ctx.fillText(lines[i], x + offsetX, y + offsetY)
offsetY = offsetY + lineHeight
}
}
この問題に関する詳細情報は 私のブログで です。
この正確な使用のために、単純なnpmモジュールを作成しました。 https://www.npmjs.com/package/canvas-txt
テキストは自動的に複数行に分割でき、\n