Canvasで文字を自動で改行する方法【JavaScript】

2020年2月26日

HTML5とJavaScriptで描画できるcanvas要素に、テキストを文章のように挿入したい案件がありました。

しかし残念ながら、canvasの文字の描画には自動的に折り返し改行できるような機能はありません。

なので今回はJavaScriptで、

これらをcanvasに反映できる機能を作ってみました。

まずはサンプルをご確認ください

実際にテキストが自動的に折り返し、自動的に改行を行うcanvasと入力フォームです。

canvasで改行（折り返し）を自動的に行う方法

canvasで自動的に改行機能を付ける方法です。

canvasの横幅と文字数を指定し、文字サイズを逆算する

canvasの横幅と、1行あたりに入れられる文字数を指定し、横幅を文字数で割ります。
すると、1行ぴったりに収まる文字サイズが特定できます。

そして、文章をすべて1文字毎に配列化します。
splitを空文字で設定すると、テキストを1文字毎に配列にすることが出来ます。

<script>
var str = 'あいうえお';
console.log( str.split('') ); //[ "あ", "い", "う", "え", "お" ]
</script>

この配列を繰り返して、一定数の文字が溜まったら改行を行う、というループ処理を行って、自動改行を実現します。

HTML

HTML側では、ここではテキストエリアとcanvasのみを設定します。

<textarea class="canvas_input"></textarea>
<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

JavaScriptでは、入力でcanvasへの描画を促すイベントを設定し、文章をループさせて文字を表示しています。

コメントアウトした解説文をご確認ください。

var canvas_dom = document.getElementById('canvas'); //canvasのDOM
var canvas = canvas_dom.getContext('2d'); //canvasデータ
var canvas_width = canvas_dom.getAttribute('width'); //canvasの横幅
var canvas_height = canvas_dom.getAttribute('height'); //canvasの縦幅
var input_dom = document.querySelector('.canvas_input'); //入力要素
var row_string_cnt = 20; //一行あたりの文字数

canvasInput();

//入力時にイベントを発火
input_dom.addEventListener('input', function(e){
	canvasInput();
});

function canvasInput(){
	//canvasリセット
	canvas.clearRect(0, 0, canvas_width, canvas_height);
	//外枠に罫線を引く
	canvas.strokeRect(0, 0, canvas_width, canvas_height);
	
	//横幅と1行あたりの文字数から、文字サイズを算出
	var font_size = Math.round(canvas_width / row_string_cnt);
	
	//canvasの文字データを設定
	canvas.textAlign = 'left';
	canvas.fillStyle = 'black';
	canvas.font = font_size + 'px meiryo';
	canvas.textBaseline = 'hanging';
	
	//入力文字を1文字毎に配列化
	var aryText = input_dom.value.split('');
	
	//出力用の配列を用意
	var aryRow = [];
	aryRow[0] = '';
	var row_cnt = 0;
	
	//入力1文字毎にループ　改行コードもしくは折り返しで配列の添え字を足す
	for(var i = 0; i < aryText.length; i++){
		var text = aryText[i];
		if(aryRow[row_cnt].length >= row_string_cnt){
			row_cnt++;
			aryRow[row_cnt] = '';
		}
		if(text == "\n"){
			row_cnt++;
			aryRow[row_cnt] = '';
			text = '';
		}
		aryRow[row_cnt] += text;
	}
	
	//文字の表示　y軸とx軸をループする
	for(var i = 0; i < aryRow.length; i++){
		aryStr = aryRow[i].split('');
		for(var j = 0; j < aryStr.length; j++){
			canvas.fillText(aryStr[j], (j * font_size), (i * font_size) + 10);
		}
	}
}

以上、Canvasで文字を自動で改行する方法、でした。