canvasで複数のテキストを回転

Question

前提・実現したいこと

現在HTMLのcanvasを勉強しています。
下の画像はAdobeXDのデザインデータで作ったデザインで、こちらを目標として色々試していますがrotateがうまく扱えません。

↓完成予定図

発生している問題・エラーメッセージ

rotateとtranslateを使用することはわかりますが、うまく目標に近づけることができません。
saveやrestoreなどもどこに書けばいいのか見当がつきません。

↓現状

該当のソースコード

const brown_text_name = ['brown_a_1', 'brown_a_2', 'brown_c', 'brown_H', 'brown_i', 'brown_M', 'brown_p',
'brown_P_1', 'brown_P_2', 'brown_s_1', 'brown_s_2', 'brown_T', 'brown_v'];

// 茶色文字？の設定（X座標、Y座標、角度、フォントの種類＆サイズ, 色, 出力文字）
var brown_text = {
	
	'brown_a_1' : {'pointX': 1044, 'pointY': 373, 'angle': 20,'font_size': '200px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'a'},
	'brown_a_2' : {'pointX': 823, 'pointY': 427, 'angle': -20, 'font_size': '120px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'a'},
	'brown_c' : {'pointX': 1087, 'pointY': 645, 'angle': 20, 'font_size': '120px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'c'},
	'brown_H' : {'pointX': -58, 'pointY': 290, 'angle': 340, 'font_size': '330px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'H'},
	'brown_i' : {'pointX': 1259, 'pointY': 754, 'angle': 20, 'font_size': '230px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'i'},
	'brown_M' : {'pointX': 319, 'pointY': 74, 'angle': 20, 'font_size': '240px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'M'},
	'brown_p' : {'pointX': 1381, 'pointY': 656, 'angle': -10, 'font_size': '200px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'p'},
	'brown_P_1' : {'pointX': 669, 'pointY': -45, 'angle': -25, 'font_size': '350px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'P'},
	'brown_P_2' : {'pointX': 1074, 'pointY': 113, 'angle': -25, 'font_size': '230px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'P'},
	'brown_s_1' : {'pointX': 414, 'pointY': 496, 'angle': -30, 'font_size': '270px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 's'},
	'brown_s_2' : {'pointX': 312, 'pointY': 716, 'angle': -20, 'font_size': '120px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 's'},
	'brown_T' : {'pointX': 169, 'pointY': 178, 'angle': -20, 'font_size': '150px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'T'},
	'brown_v' : {'pointX': 927, 'pointY': 311, 'angle': -20, 'font_size': '150px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'v'},

};

$(document).ready(function() {

	// TOP部分の描画コンテキスト取得
	var canvas = document.getElementById('top_canvas');

	// 描画範囲設定
	canvas.width = window.innerWidth;
	canvas.height = 1900;

	// コンテキスト取得
	if (canvas.getContext) {
		var context_brown = canvas.getContext('2d');	// 茶色文字用コンテキスト
	}

	context_brown.textAlign = "center";
	context_brown.textBaseline = "middle";

	context_brown.save();

	for (let i = 0; i <= brown_text_name.length-1; i++) {

		var x = brown_text[brown_text_name[i]]['pointX'];
		var y = brown_text[brown_text_name[i]]['pointY'];
		context_brown.font = brown_text[brown_text_name[i]]['font_size'];
		context_brown.fillStyle = brown_text[brown_text_name[i]]['color'];

		// context_brown.translate(x, y);
		// context_brown.rotate(brown_text[brown_text_name[i]]['angle'] * Math.PI / 180);
		context_brown.fillText(brown_text[brown_text_name[i]]['value'], x, y);
		// context_brown.rotate((brown_text[brown_text_name[i]]['angle'] * (-1)) * Math.PI / 180);
		context_brown.restore();

		console.log(brown_text[brown_text_name[i]]['value'], x, y);
	}
}

試したこと

ソースコードのとおり描画するテキストを連想配列で定義し、for文で各値を連想配列から取得して描画しています。

Answer 1

①save、restoreはfor文の中で、各文字個別にfont/fontSize/fillTextなどを与える前のコンテキストをsaveし、与え終わったら与える前のコンテキストにrestore（戻す）という感じかと思います。

②rotate, translateはfillTextする前に記述するのだと思います。
rotateは画面左上からなので、translateで文字の座標に回転の中心を変更してから、rotate
rotateし終わったら、座標を戻してからfillText

③あとは、angleプロパティを地道に直していけば、いい感じになると思います。

for文内のみ直せば、いいと思います。

    for (let i = 0; i <= brown_text_name.length-1; i++) {
        context_brown.save();

        var x = brown_text[brown_text_name[i]]['pointX'];
        var y = brown_text[brown_text_name[i]]['pointY'];
        context_brown.font = brown_text[brown_text_name[i]]['font_size'];
        context_brown.fillStyle = brown_text[brown_text_name[i]]['color'];
        context_brown.translate(x, y);
        context_brown.rotate((brown_text[brown_text_name[i]]['angle'] * (-1)) * Math.PI / 180);
        context_brown.translate(-x, -y);
        context_brown.fillText(brown_text[brown_text_name[i]]['value'], x, y);

        context_brown.restore();

        console.log(brown_text[brown_text_name[i]]['value'], x, y);
    }

Comments

[Karna554]

ありがとうございます。
無事解決しました。