Canvas JavaScript 改行文字が適用されない

![]

Canvasで文字を折り返したいのですが、エスケープシーケンスを使っても
円マークもバックスラッシュも反映されません。
どうしたらよいでしょうか？

よろしくお願いします

javascript
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>SLT SLIDE</title>
6    <style>
7        canvas { background: rgb(94, 94, 94);
8                width: 100%; height: 100%;}
9        body {margin: 0;}
10    </style>
11
12</head>
13<body>
14    <canvas></canvas>
15<script>
16    
17    var canvas = document.querySelector('canvas');
18    var endX = canvas.width = window.innerWidth;
19    var endY = canvas.height = window.innerHeight;
20    var c = canvas.getContext('2d');
21    var midX = endX/2;
22    var midY = endY/2;
23  
24    c.beginPath();
25    c.strokeStyle = '#fff';
26    c.textAlign = 'left';
27    c.font = '100px serif';
28    c.strokeText("stringAAAAAAA\nBBBBB",0,midY,);
29    
30</script>
31</body>
32</html>

m.ts10806

2018/11/16 07:31

他のテキスト描画系の関数は試してみました？

yambejp

2018/11/16 08:51

とりあえず今の表示している状態をソースとして提示下さい

Kaede0902

2018/11/26 09:14

fillTextでもStrokeTextでも同様です。ソースコードを追記しました！

行動規範の内容に同意します

回答1件

ベストアンサー

drawText()は、ライブラリの関数か何かでしょうか？

例えば、デフォルトのテキスト描画用関数では、fillText(text, x, y [, maxWidth ] )とstrokeText(text, x, y [, maxWidth ] )がありますが、どちらも複数行には対応していませんので、下記のように、折り返し用の関数を自作して使います。

html5
1<canvas id="myCanvas" width=300 height=300></canvas>
2
3<script>
4//改行させるためのファンクション
5 function fillTextLine (context, text, x, y) {
6  var textList = text.split('\n');//\nで分割して配列にします。
7  var lineHeight = context.measureText("あ").width;// あ　はフォントのサイズを取得するのに利用しているだけです。
8  textList.forEach(function(text, i) {//配列を順番に読み出して、y（高さ）を計算しながら描画していきます。
9    context.fillText(text, x, y+lineHeight*i);
10  });
11};
12
13  var canvas = document.getElementById("myCanvas");
14  var context= canvas.getContext("2d");
15  context.font = "16px 'メイリオ'";
16
17  var text = "長いテキスト\n改行したあとのテキスト\nさらに改行したあとのテキスト";
18  fillTextLine(context, text, 50, 140);
19</script>