9/27(日)CSS Nite in OSAKAのセッション内容予告

2009年9月14日 01:20

9/27（日）にアップルストア心斎橋で開催されるCSS Nite in OSAKA, Vol.19で（久しぶりのアップルストアだなあ）HTML5のcanvas要素の事を触れてみようと思います。

僕自身はJavaScript未経験者ですので、未経験者のための勉強ということで経験者の方は退屈されるかもしれませんが、それでも来場される方、どうぞよろしくお願いします。

今日のcanvasはこちら。

[http://akibahideki.com/blog/canvasball.html]

window.onload = function() {
var canvas = document.getElementById('testCircle');
	var timeID;
	var ctx;
	var _width = 1200;
	var _height = 800;
	var ballArray = [];
	var ballNum = 50;
	var mouseX;
	var mouseY;
	ctx = canvas.getContext("2d");
	
if (canvas.getContext) {
		initBall();
		window.onmousemove = getMouseXY;
		}
		
function getMouseXY(evt){
	mouseX = evt.layerX;
	mouseY = evt.layerY;
	//console.log(mouseX);
	}

function balls(){
		ctx.clearRect(0,0,_width,_height);
		ctx.beginPath();
		for (var i=0 ; i<ballNum ; i++){
			var myX = ballArray[i][0];
			var myY = ballArray[i][1];

//マウス衝突判定
			var myR = ballArray[i][2];
			if(mouseX > myX-myR && mouseX < myX+myR && mouseY > myY-myR && mouseY < myY+myR) {
				//console.log("hit");
				ballArray[i][3]=rand(_width);
				ballArray[i][4]=rand(_height);
			}
			
			ctx.fillStyle = "red";
			var spd = rand(5)/100;
			myX+=(ballArray[i][3]-myX)*spd;
			myY+=(ballArray[i][4]-myY)*spd;
			ctx.arc(myX, myY, ballArray[i][2], 0, 360*Math.PI/180, true);
			ballArray[i]=[myX , myY , myR , ballArray[i][3] , ballArray[i][4]];
			ctx.closePath();
		}
		ctx.fill();
		//丸のパス描画(1回転分)ココまで
		}

function initBall() {
		ctx.clearRect(0,0,_width,_height);
		ctx.beginPath();
		for (var i=0 ; i<ballNum ; i++){
			var ball_x = rand(_width);
			var ball_y = rand(_height);
			var ball_r = rand(25)+25;
			var ball_target_x = rand(_width);
			var ball_target_y = rand(_height);
			ctx.fillStyle = "red";
			ctx.arc(ball_x, ball_y, ball_r, 0, 360*Math.PI/180, true);
			ctx.closePath();
			//配列に各パラメータを代入
			ballArray.push([ball_x , ball_y , ball_r , ball_target_x , ball_target_y]);
		}
		ctx.fill();
		//丸のパス描画ココまで
			timeID=setInterval(balls,30);
		}	
};

function rand(num){
	return Math.floor(Math.random()*num);
}

このページの最初へもどる