Canvasタグでの描画とマウスポインタ認識

JAVAスクリプトでブラウザに自由にお絵かきできる、「Canvasタグ」。
難しそうと思っていましたが、やってみると意外と簡単です。
これに慣れれると、いろんな表現の幅が広がり、とっても重宝しそうです。

以下のソースは
指定した場所を四角く塗りつぶして、指定した場所にテキストを描画して、マウスポインタが塗りつぶした枠内に入るとマウスポインタの形状が変わり、クリックするとYahooのサイトへ遷移します。

HTML側では<canvas id=”my_canvas” width=”1000px” height=”500″> のようにIDとwidth,heightを指定します。
そして、document.getElementById メソッドで、htmlと結びつけるのがポイントです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Canvas描画サンプル</title>

<script type="text/javascript">
 window.onload = drawRect;


 function drawRect(){

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


 //マウスムーブ カーソルが重なった時にマウスポインターを変える
 canvas.addEventListener("mousemove",function(e){
    var rect = e.target.getBoundingClientRect();
    mouseX = e.clientX - rect.left;
    mouseY = e.clientY - rect.top;

    //hit_check関数で座標チェック
    if(hit_check(mouseX,mouseY)){
      document.body.style.cursor = "pointer";
    }else{
      document.body.style.cursor = "auto";
    }
 
 },false);



 //キャンバスのMouseDown
 canvas.onmousedown = (function(e) {
    var rect = e.target.getBoundingClientRect();
    var mx = e.clientX - rect.left;
    var my = e.clientY - rect.top;

    //hit_check関数で座標チェック
    if(hit_check(mx,my)){
      //遷移
      window.location.href="http://yahoo.co.jp";
    }
 });



 //描画
 if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.fillStyle = 'rgb(152,251,152)'; 
    context.fillRect(20,20,200,100);

    context.fillStyle = 'rgb(0,0,0)'; 
    context.font = "8.8pt Arial";
    context.fillText("こんにちは",20,20);
    context.fillText("このエリアをクリックすると画面遷移します。",20,50);
  }
 }

	
	function hit_check(mx,my){
		//マウスポインタの重なりをチェック
		if(mx>=20 && mx<=220 && my>=20 && my<=120){
			//ヒット
			return true;
		
		}
	}
</script>

</head>

<body>
<div class="my_div">
			<canvas id="my_canvas" width="1000px" height="500">
				表示するには、canvasタグをサポートしたブラウザが必要です。
Google Chrome1.0以上 / Internet Explorer 9.0以上 / Opera 9.0以上 / Safari 2.0以上
			</canvas></div>
</body>

</html>

カテゴリー: HTML パーマリンク