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

イベント処理

  1. マウスクリック

      イベント処理に対する最も簡単な方法は,BUTTON 要素などにイベント処理属性を記述する方法です.この例では,BUTTON 要素onClick 属性を付加してイベント処理を実現しています.

    01	<!DOCTYPE HTML>
    02	<HTML>
    03	<HEAD>
    04		<TITLE>マウスクリック(その1)</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			x      = 70;
    09			y      = 65;
    10			canvas = null;
    11			ctx    = null;
    12	
    13			function draw() {
    14				canvas = document.getElementById('canvas_e');
    15				canvas.width  = 270;   // キャンバス要素の幅
    16				canvas.height = 130;   // キャンバス要素の高さ
    17				ctx = canvas.getContext('2d');
    18						// 矩形(左)
    19				ctx.lineWidth = 5;
    20				ctx.beginPath();
    21				ctx.strokeRect(20, 15, 100, 100);
    22				ctx.stroke();
    23						// 矩形(右)
    24				ctx.beginPath();
    25				ctx.strokeRect(150, 15, 100, 100);
    26				ctx.stroke();
    27						// 塗りつぶした円
    28				ctx.beginPath();
    29				ctx.fillStyle = "rgb(0, 255, 0)";
    30				ctx.arc(x, y, 40, 0, 2*Math.PI, false);
    31				ctx.fill();
    32			}
    33						// マウスのクリック
    34			function Click()
    35			{
    36				if (x < 100) {
    37					ctx.clearRect(25, 20, 90, 90);
    38					x = 200;
    39				}
    40				else {
    41					ctx.clearRect(155, 20, 90, 90);
    42					x = 70;
    43				}
    44				ctx.beginPath();
    45				ctx.arc(x, y, 40, 0, 2*Math.PI, false);
    46				ctx.fill();
    47			}
    48		</SCRIPT>
    49	</HEAD>
    50	<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
    51		<H1>マウスクリック(その1)</H1>
    52		<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="270" HEIGHT="130"></CANVAS><BR><BR>
    53		<BUTTON STYLE="font-size: 90%" onClick="Click()">移動</BUTTON>
    54	</BODY>
    55	</HTML>
    			

    53 行目

      このボタンをクリックすると,onClick 属性に記述された関数 Click( 34 行目~ 47 行目)が呼ばれます.

    08 行目~ 11 行目

      x,y は円の中心座標です.今までは,変数 canvas や ctx を関数 draw 内で定義していましたが,これらの変数は,他の関数からも参照されるため,この位置(関数の外側)にグローバル変数として定義しておく必要があります.

    36 行目~ 39 行目

      円が左側の矩形内に存在する場合に対する処理です.矩形内をクリアし,円の中心座標を変更しています.

    40 行目~ 43 行目

      円が右側の矩形内に存在する場合に対する処理であり,上と同様の処理を行います.

    44 行目~ 46 行目

      塗りつぶした円を描いています.

      しかし,上に述べた方法は,CANVAS 内の特定の場所をクリックしたときだけイベント処理を行いたいような場合には使用できません.この例では,「 DOM 及び CANVAS 関係の JavaScript のプロパティとメソッド」における addEventListener を使用して,マウスクリックイベントに対応しています.矩形内部の円をクリックすると,イベントが発生し,Click メソッドが呼び出されます(円を左から右,又は,右から左に移動).

    01	<!DOCTYPE HTML>
    02	<HTML>
    03	<HEAD>
    04		<TITLE>マウスクリック(その2)</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			x      = 70;
    09			y      = 65;
    10			canvas = null;
    11			ctx    = null;
    12			x_base = -1;
    13			y_base = -1;
    14	
    15			function draw() {
    16				canvas = document.getElementById('canvas_e');
    17				canvas.width  = 270;   // キャンバス要素の幅
    18				canvas.height = 130;   // キャンバス要素の高さ
    19				ctx = canvas.getContext('2d');
    20				x_base = canvas.offsetLeft;   // キャンバスの左上のx座標
    21				y_base = canvas.offsetTop;   // キャンバスの左上のy座標
    22				canvas.addEventListener("click", Click, false);   // クリックイベント
    23						// 矩形(左)
    24				ctx.lineWidth = 5;
    25				ctx.beginPath();
    26				ctx.strokeRect(20, 15, 100, 100);
    27				ctx.stroke();
    28						// 矩形(右)
    29				ctx.beginPath();
    30				ctx.strokeRect(150, 15, 100, 100);
    31				ctx.stroke();
    32						// 塗りつぶした円
    33				ctx.beginPath();
    34				ctx.fillStyle = "rgb(0, 255, 0)";
    35				ctx.arc(x, y, 40, 0, 2*Math.PI, false);
    36				ctx.fill();
    37			}
    38						// マウスのクリック
    39			function Click(event)
    40			{
    41				var x_now = event.pageX - x_base;
    42				var y_now = event.pageY - y_base;
    43				var x1 = x - x_now;
    44				var y1 = y - y_now;
    45				var r  = Math.sqrt(x1 * x1 + y1 * y1);
    46				if (r < 40) {
    47					if (x < 100) {
    48						ctx.clearRect(25, 20, 90, 90);
    49						x = 200;
    50					}
    51					else {
    52						ctx.clearRect(155, 20, 90, 90);
    53						x = 70;
    54					}
    55					ctx.beginPath();
    56					ctx.arc(x, y, 40, 0, 2*Math.PI, false);
    57					ctx.fill();
    58				}
    59			}
    60		</SCRIPT>
    61	</HEAD>
    62	<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
    63		<H1>マウスクリック(その2)</H1>
    64		<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="270" HEIGHT="130"></CANVAS>
    65	<!--  addEventListener を使用せず,以下のように記述しても良い
    66		<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="270" HEIGHT="130" onClick="Click(event)"></CANVAS>
    67	-->
    68	</BODY>
    69	</HTML>
    			

    12 行目~ 13 行目

      Window の左上を原点とした座標系におけるキャンバスの位置(キャンバスの左上の座標 : (offsetLeft, offsetTop) )を保存するための変数です.20 行目~ 21 行目において設定しています.

    22 行目

      EventListener を追加しています.この記述により,キャンバス上でマウスをクリックすると関数 Click が呼ばれます.この行の代わりに,66 行目の記述でも可能です.

    41 行目~ 42 行目

      マウスをクリックした位置 ( pageX, pageY ) は,Window の左上を原点とした座標系で表現されるため,それを,キャンバスの左上を原点とした座標系に変換しています.

    43 行目~ 46 行目

      マウスをクリックした点と円の中心までの距離 r を計算し,その値が円の半径( 40 )より小さい場合(円がクリックされた場合)に以下に記述された移動処理を行います.46 行目の if 文に対応する else 文が存在しないため,r の値が 40 以上の時は何も実行されません.なお,sqrt は,Math オブジェクトのメソッドであり,引数で与えられたデータの平方根を計算して返します.

    65 行目~ 67 行目

      「 <!-- 」と「 --> 」で囲まれた部分は,コメントとみなされ,画面に表示されません.

  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			x      = 70;
    09			y      = 65;
    10			x_s    = 70;
    11			y_s    = 65;
    12			canvas = null;
    13			ctx    = null;
    14			x_base = -1;
    15			y_base = -1;
    16			drag   = false;
    17	
    18			function draw() {
    19				canvas = document.getElementById('canvas_e');
    20				canvas.width  = 270;   // キャンバス要素の幅
    21				canvas.height = 130;   // キャンバス要素の高さ
    22				ctx = canvas.getContext('2d');
    23				x_base = canvas.offsetLeft;   // キャンバスの左上のx座標
    24				y_base = canvas.offsetTop;   // キャンバスの左上のy座標
    25				canvas.addEventListener("mousemove", Move);   // マウス移動イベント
    26				canvas.addEventListener("mousedown", Down);   // マウスボタン押下イベント
    27				canvas.addEventListener("mouseup", Up);   // マウスボタン離されたイベント
    28						// 矩形(左)
    29				ctx.lineWidth = 5;
    30				ctx.beginPath();
    31				ctx.strokeRect(20, 15, 100, 100);
    32				ctx.stroke();
    33						// 矩形(右)
    34				ctx.beginPath();
    35				ctx.strokeRect(150, 15, 100, 100);
    36				ctx.stroke();
    37						// 塗りつぶした円
    38				ctx.beginPath();
    39				ctx.fillStyle = "rgb(0, 255, 0)";
    40				ctx.arc(x, y, 40, 0, 2*Math.PI, false);
    41				ctx.fill();
    42			}
    43						// マウス移動イベント
    44			function Move(event)
    45			{
    46				if (drag) {
    47					ctx.clearRect(0, 0, canvas.width, canvas.height);
    48						// 矩形(左)
    49					ctx.lineWidth = 5;
    50					ctx.beginPath();
    51					ctx.strokeRect(20, 15, 100, 100);
    52					ctx.stroke();
    53						// 矩形(右)
    54					ctx.beginPath();
    55					ctx.strokeRect(150, 15, 100, 100);
    56					ctx.stroke();
    57						// 塗りつぶした円
    58					var x_now = x + event.pageX - x_s;
    59					var y_now = y + event.pageY - y_s;
    60					ctx.beginPath();
    61					ctx.fillStyle = "rgb(0, 255, 0)";
    62					ctx.arc(x_now, y_now, 40, 0, 2*Math.PI, false);
    63					ctx.fill();
    64				}
    65			}
    66						// マウスボタン押下イベント
    67			function Down(event)
    68			{
    69				var x_now = event.pageX - x_base;
    70				var y_now = event.pageY - y_base;
    71				var x1 = x - x_now;
    72				var y1 = y - y_now;
    73				var r  = Math.sqrt(x1 * x1 + y1 * y1);
    74				if (r < 40) {
    75					drag = true;
    76					x_s  = event.pageX;
    77					y_s  = event.pageY;
    78				}
    79			}
    80						// マウスボタン離されたイベント
    81			function Up(event)
    82			{
    83				if (drag) {
    84					x += (event.pageX - x_s);
    85					y += (event.pageY - y_s);
    86					drag = false;   // ドラッグ終了
    87				}
    88			}
    89		</SCRIPT>
    90	</HEAD>
    91	<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
    92		<H1>ドラッグ</H1>
    93		<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="270" HEIGHT="130"></CANVAS>
    94	</BODY>
    95	</HTML>
    			

    10 行目~ 11 行目

      マウスボタンが押し下げられたとき(ドラッグが始まったとき)の Window の左上を原点とした座標系におけるマウスの位置です.

    16 行目

      ドラッグが始まると true に,また,ドラッグが終了すると false に設定されます.つまり,ドラッグ中か否かを表す変数です.

    25 行目~ 27 行目

      EventListener を追加しています.これらの処理により,マウスが移動中は関数 Move( 44 行目~ 65 行目),マウスボタンが押し下げられたときは関数 Down( 67 行目~ 79 行目),また,マウスボタンが離されたときは関数 Up( 81 行目~ 88 行目)が呼ばれます.

    44 行目~ 65 行目

      ドラッグ中の場合,キャンバス領域をクリアした後,2 つの矩形と円を描画します.円の位置は,移動に伴って変化していきます( 58,59 行目).

    67 行目~ 79 行目

      円内でマウスボタンが押し下げられた場合は,変数 drag を true に設定し,現在のマウス位置を変数 x_s,y_s に保存しています.

    81 行目~ 88 行目

      ドラッグ中であった場合は,円の位置を現在のマウスの位置に設定し,ドラッグを終了します.ドラッグ中には,移動に伴って矩形や円が再描画されています(関数 Move )ので,円が描画されている位置と現在のマウスの位置はほとんど同じはずです.

  3. キーイベント

      最後に,キーイベントについて説明します.この例においては,n キーを押すと,円の位置が変化します.

    01	<!DOCTYPE HTML>
    02	<HTML>
    03	<HEAD>
    04		<TITLE>キーイベント( n キー)</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			x      = 70;
    09			y      = 65;
    10			canvas = null;
    11			ctx    = null;
    12	
    13			function draw() {
    14				canvas = document.getElementById('canvas_e');
    15				canvas.width  = 270;   // キャンバス要素の幅
    16				canvas.height = 130;   // キャンバス要素の高さ
    17				ctx = canvas.getContext('2d');
    18				canvas.addEventListener("keydown", KeyDown, false);   // キーが押された時
    19						// 矩形(左)
    20				ctx.lineWidth = 5;
    21				ctx.beginPath();
    22				ctx.strokeRect(20, 15, 100, 100);
    23				ctx.stroke();
    24						// 矩形(右)
    25				ctx.beginPath();
    26				ctx.strokeRect(150, 15, 100, 100);
    27				ctx.stroke();
    28						// 塗りつぶした円
    29				ctx.beginPath();
    30				ctx.fillStyle = "rgb(0, 255, 0)";
    31				ctx.arc(x, y, 40, 0, 2*Math.PI, false);
    32				ctx.fill();
    33			}
    34						// キーが押されたとき
    35			function KeyDown(event)
    36			{
    37				if (event.keyCode == 78) {   // 「n」キー
    38					if (x < 100) {
    39						ctx.clearRect(25, 20, 90, 90);
    40						x = 200;
    41					}
    42					else {
    43						ctx.clearRect(155, 20, 90, 90);
    44						x = 70;
    45					}
    46					ctx.beginPath();
    47					ctx.arc(x, y, 40, 0, 2*Math.PI, false);
    48					ctx.fill();
    49				}
    50			}
    51		</SCRIPT>
    52	</HEAD>
    53	<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
    54		<H1>キーイベント( n キー)</H1>
    55		<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="270" HEIGHT="130" TABINDEX="1"></CANVAS>
    56	</BODY>
    57	</HTML>
    			

    18 行目

      EventListener を追加しています.この処理により,キーが押されると関数 KeyDown( 35 行目~ 50 行目)が呼ばれます.

    35 行目~ 50 行目

      押されたキーが「 n 」キー(キーコードが 78 )であった場合は,移動処理を実行します.

    55 行目

      TABINDEX 属性の記述を忘れないで下さい.

  4. もう一つの例

      この例では,円をマウスでクリックしても,n キーを押しても,円が移動するようにしています.

    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    	<TITLE>マウスクリックとキーイベント</TITLE>
    	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
    	<SCRIPT TYPE="text/javascript">
    		x      = 70;
    		y      = 65;
    		canvas = null;
    		ctx    = null;
    		x_base = -1;
    		y_base = -1;
    
    		function draw() {
    			canvas = document.getElementById('canvas_e');
    			canvas.width  = 270;   // キャンバス要素の幅
    			canvas.height = 130;   // キャンバス要素の高さ
    			ctx = canvas.getContext('2d');
    			x_base = canvas.offsetLeft;   // キャンバスの左上のx座標
    			y_base = canvas.offsetTop;   // キャンバスの左上のy座標
    			canvas.addEventListener("click", Click, false);   // クリックイベント
    			canvas.addEventListener("keydown", KeyDown, false);   // キーが押された時
    					// 矩形(左)
    			ctx.lineWidth = 5;
    			ctx.beginPath();
    			ctx.strokeRect(20, 15, 100, 100);
    			ctx.stroke();
    					// 矩形(右)
    			ctx.beginPath();
    			ctx.strokeRect(150, 15, 100, 100);
    			ctx.stroke();
    					// 塗りつぶした円
    			ctx.beginPath();
    			ctx.fillStyle = "rgb(0, 255, 0)";
    			ctx.arc(x, y, 40, 0, 2*Math.PI, false);
    			ctx.fill();
    		}
    					// マウスのクリック
    		function Click(event)
    		{
    			var x_now = event.pageX - x_base;
    			var y_now = event.pageY - y_base;
    			var x1 = x - x_now;
    			var y1 = y - y_now;
    			var r  = Math.sqrt(x1 * x1 + y1 * y1);
    			if (r < 40) {
    				if (x < 100) {
    					ctx.clearRect(25, 20, 90, 90);
    					x = 200;
    				}
    				else {
    					ctx.clearRect(155, 20, 90, 90);
    					x = 70;
    				}
    				ctx.beginPath();
    				ctx.arc(x, y, 40, 0, 2*Math.PI, false);
    				ctx.fill();
    			}
    		}
    					// キーが押されたとき
    		function KeyDown(event)
    		{
    			if (event.keyCode == 78) {   // 「n」キー
    				if (x < 100) {
    					ctx.clearRect(25, 20, 90, 90);
    					x = 200;
    				}
    				else {
    					ctx.clearRect(155, 20, 90, 90);
    					x = 70;
    				}
    				ctx.beginPath();
    				ctx.arc(x, y, 40, 0, 2*Math.PI, false);
    				ctx.fill();
    			}
    		}
    	</SCRIPT>
    </HEAD>
    <BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
    	<H1>マウスクリックとキーイベント</H1>
    	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="270" HEIGHT="130" TABINDEX="1"></CANVAS>
    </BODY>
    </HTML>
    			

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