サイト内検索

setTransform() メソッド

実行結果

コード

/* ----------------------------------------------
* 元の矩形を赤色で描く
* -------------------------------------------- */
ctx.strokeStyle = "red";
ctx.strokeRect(30, 10, 60, 20);

/* ----------------------------------------------
* 45°回転した矩形を青色で描く
* -------------------------------------------- */
/* 45°をラジアンに変換 */
var rad = 45 * Math.PI / 180;
/* 右に45°回転する変換マトリックスを定義 */
ctx.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad), 0, 0 );
/* 図形を描画 */
ctx.strokeStyle = "blue";
ctx.strokeRect(30, 10, 60, 20);

/* ----------------------------------------------
* 2.5倍に拡大したものを緑色で描く
* -------------------------------------------- */
/* 2.5倍の拡大する変換マトリックスを定義 */
ctx.setTransform(2.5, 0, 0, 2.5, 0, 0);
/* 図形を描画 */
ctx.strokeStyle = "green";
ctx.strokeRect(30, 10, 60, 20);

/* ----------------------------------------------
* 右に40、下に80だけ移動したものを灰色で描く
* -------------------------------------------- */
/* 右に40、下に80だけ移動する変換マトリックスを定義 */
ctx.setTransform(1, 0, 0, 1, 40, 80);
/* 図形を描画 */
ctx.strokeStyle = "gray";
ctx.strokeRect(30, 10, 60, 20);