静岡理工科大学 菅沼ホーム JavaScript 目次 基礎技術目次 索引

移動,回転,縮小・拡大

  1. アフィン変換

      オブジェクトを移動,回転,縮小・拡大させる最も簡単な方法は,「 DOM 及び CANVAS 関係の JavaScript のプロパティとメソッド」における「変形」内の translate メソッド,rotate メソッド,及び,scale メソッドを利用する方法です.この例は,これらのメソッドを利用して,回転,移動・縮小を行った例です.例えば回転の場合,一見,画像を時計方向に 20 度( -20 度)回転した結果のように見えますが,反時計方向に 20 度回転した座標軸が水平方向及び垂直方向になり,その座標軸から見た結果が表示されています.例えば,現在の座標系における点 p(0, 1) は,座標軸を反時計方向に 20 度回転させたとき,その座標系から点 p を見るとどのように見えるかを考えてみてください.点 p の座標は,(cos(20°), -sin(20°)) = (0.940, -0.342) のように見えるはずです.同様に,他の変換についても,座標軸に対する変換であることに注意してください.

    01	<!DOCTYPE HTML>
    02	<HTML>
    03	<HEAD>
    04		<TITLE>回転,拡大・縮小,移動</TITLE>
    05		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    06		<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
    07		<SCRIPT TYPE="text/javascript">
    08			function draw() {
    09				var canvas    = document.getElementById('canvas_e');
    10				canvas.width  = 250;   // キャンバス要素の幅
    11				canvas.height = 130;   // キャンバス要素の高さ
    12				var ctx       = canvas.getContext('2d');
    13						// 回転する前の図形
    14				ctx.beginPath();
    15				ctx.strokeRect(40, 20, 100, 50);
    16				ctx.stroke();
    17						// 座標軸を反時計回りに20度回転
    18				ctx.beginPath();
    19				ctx.fillStyle = "rgb(0, 255, 0)";
    20				ctx.rotate(20*Math.PI/180);
    21				ctx.fillRect(40, 20, 100, 50);
    22						// 座標軸を移動して縮小
    23				ctx.beginPath();
    24				ctx.fillStyle = "rgb(255, 0, 0)";
    25				ctx.rotate(-20*Math.PI/180);
    26				ctx.translate(150, 0);
    27				ctx.scale(0.5, 0.5);
    28				ctx.fillRect(40, 20, 100, 50);
    29			}
    30		</SCRIPT>
    31	</HEAD>
    32	<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
    33		<H1>回転,拡大・縮小,移動</H1>
    34		<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="250" HEIGHT="130"></CANVAS>
    35	</BODY>
    36	</HTML>
    			
    20 行目

      座標軸を反時計回りに 20 度回転しています.

    25 行目

      座標軸を時計回りに 20 度回転しています(元に戻している).

    26 行目

      座標軸の原点を (150, 0) に変更しています.

    27 行目

      2 つの座標軸を 0.5 倍しています.

      transform メソッドは,右図に示すような変換行列(アフィン変換行列と呼ぶ)を利用して上で示したような変換を行っています.下に示すのは,移動(座標軸を x 軸方向に tx,y 軸方向に ty だけ移動),拡大・縮小(座標軸を x 軸方向に sx 倍,y 軸方向に sy 倍拡大),及び,回転(座標軸を q ラジアン回転)を単独に行う場合における行列の値を示しています.

        

      この例では,上と全く同じ変換を transform メソッドを利用して行っています.

    01	<!DOCTYPE HTML>
    02	<HTML>
    03	<HEAD>
    04		<TITLE>回転,拡大・縮小,移動(行列)</TITLE>
    05		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    06		<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
    07		<SCRIPT TYPE="text/javascript">
    08			function draw() {
    09				var canvas    = document.getElementById('canvas_e');
    10				canvas.width  = 250;   // キャンバス要素の幅
    11				canvas.height = 130;   // キャンバス要素の高さ
    12				var ctx       = canvas.getContext('2d');
    13						// 回転する前の図形
    14				ctx.beginPath();
    15				ctx.strokeRect(40, 20, 100, 50);
    16				ctx.stroke();
    17						// 座標軸を反時計回りに20度回転
    18				ctx.beginPath();
    19				ctx.fillStyle = "rgb(0, 255, 0)";
    20				var ang = 20 * Math.PI / 180;
    21				var a   = Math.cos(ang);
    22				var b   = Math.sin(ang);
    23				var c   = -Math.sin(ang);
    24				var d   = Math.cos(ang);
    25				ctx.transform(a, b, c, d, 0, 0);
    26				ctx.fillRect(40, 20, 100, 50);
    27						// 座標軸を移動して縮小
    28				ctx.beginPath();
    29				ctx.fillStyle = "rgb(255, 0, 0)";
    30				ctx.transform(a, -b, -c, d, 0, 0);
    31				ctx.transform(0.5, 0, 0, 0.5, 150, 0);
    32				ctx.fillRect(40, 20, 100, 50);
    33			}
    34		</SCRIPT>
    35	</HEAD>
    36	<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
    37		<H1>回転,拡大・縮小,移動(行列)</H1>
    38		<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="250" HEIGHT="130"></CANVAS>
    39	</BODY>
    40	</HTML>
    			
    20 行目~ 25 行目

      座標軸を反時計回りに 20 度回転しています.

    30 行目

      座標軸を時計回りに 20 度回転しています(元に戻している).

    31 行目

      座標軸の原点を (150, 0) に変更し,2 つの座標軸を 0.5 倍しています.

  2. もう一つの例

      この例では,画面上でマウスをクリックすると,拡大及び移動を行い,再びクリックすると元に戻ります.

    01	<!DOCTYPE HTML>
    02	<HTML>
    03	<HEAD>
    04		<TITLE>拡大と移動(行列)</TITLE>
    05		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    06		<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
    07		<SCRIPT TYPE="text/javascript">
    08			canvas = null;
    09			ctx    = null;
    10			sw     = 0;
    11	
    12			function draw() {
    13				canvas        = document.getElementById('canvas_e');
    14				canvas.width  = 250;   // キャンバス要素の幅
    15				canvas.height = 130;   // キャンバス要素の高さ
    16				ctx           = canvas.getContext('2d');
    17				canvas.addEventListener("click", Click, false);   // クリックイベント
    18						// 元のの図形
    19				ctx.beginPath();
    20				ctx.strokeRect(20, 20, 100, 50);
    21				ctx.stroke();
    22			}
    23						// マウスのクリック
    24			function Click(event)
    25			{
    26				ctx.clearRect(0, 0, canvas.width, canvas.height);
    27				if (sw == 0 ) {
    28					ctx.beginPath();
    29					ctx.fillStyle = "rgb(255, 0, 0)";
    30					ctx.transform(1.5, 0, 0, 1.5, 50, 0);
    31					ctx.fillRect(20, 20, 100, 50);
    32					sw = 1;
    33				}
    34				else {
    35					ctx.setTransform(1, 0, 0, 1, 0, 0);
    36					ctx.beginPath();
    37					ctx.strokeRect(20, 20, 100, 50);
    38					ctx.stroke();
    39					sw = 0;
    40				}
    41			}
    42		</SCRIPT>
    43	</HEAD>
    44	<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
    45		<H1>拡大と移動(行列)</H1>
    46		<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="250" HEIGHT="130"></CANVAS>
    47	</BODY>
    48	</HTML>
    			
    27 行目~ 33 行目

      初期状態において,マウスでクリックされたときの処理です.30 行目において,座標軸の原点を (50, 0) に変更し,2 つの座標軸を 1.5 倍しています.

    34 行目~ 40 行目

      拡大・移動された状態において,マウスでクリックされたときの処理です.35 行目において,座標軸を元に戻しています.

静岡理工科大学 菅沼ホーム JavaScript 目次 基礎技術目次 索引