techa1008

ROCKET NOTE

2018.05.15

CreateJSでキャンバスの中央にひし形を描画する

HTML5でリッチなコンテンツを作成するためのライブラリ「CreateJS」を使って、キャンバスの中央にひし形を描画してみます。

HTMLを用意します。CreateJSはCDNで読み込みます。

SELECT ALL

<div style="text-align: center">
	<canvas id="hoge" width="200" height="200"></canvas>
</div>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
	JS記述箇所
</script>

canvas要素のサイズ(widthとheight)は、CSSで指定しても正しく解釈してくれず、必ず属性の形で指定します。

なお、アウターのdiv要素は画面中央にcanvasを配置させるもので、本題とは関係ありません。

上記のJS記述箇所に、ひし形を描画するコードを記述します。

SELECT ALL

// ページの読み込み完了後に実行する
window.addEventListener('load', init);

// 実行する関数
function init() {

	// -------------------------------------------------- ステージ

	// ステージを作成
	var stage = new createjs.Stage('hoge');

	// ステージの横幅・縦幅を取得
	var stage_w = stage.canvas.width;
	var stage_h = stage.canvas.height;

	// ステージの背景色を指定
	document.getElementById('hoge').style.background = '#167392';

	// -------------------------------------------------- シェイプ

	// シェイプを作成
	var shape = new createjs.Shape();

	// シェイプの塗りを指定
	shape.graphics.beginFill('#000');

	// シェイプの横幅、縦幅を用意
	var shape_w = 50;
	var shape_h = 50;

	// 原点(0, 0)からシェイプの幅の半分ズラして描画
	shape.graphics.drawRect(-(shape_w / 2), -(shape_h / 2), shape_w, shape_h);

	// シェイプの透明度を指定
	shape.alpha = 0.2;

	// シェイプの座標を指定
	shape.x = stage_w / 2;
	shape.y = stage_h / 2;

	// シェイプの回転角度を指定
	shape.rotation = 45;

	// -------------------------------------------------- 反映

	// シェイプをステージに追加
	stage.addChild(shape);

	// ステージを更新
	stage.update();

}

正方形を45度回転させてひし形を描画しています。この時、回転はシェイプの左上端を起点に処理されるので、初期位置をシェイプの幅の半分ズラしておくことで、直感的にその場で回転させることができます。

* * *