iammic 一直想試試號稱是 Flash 殺手的 HTML 5，今天特地寫了一個簡單的彈球程式，但比較可惜的
是 iammic 寫的 HTML5 彈球程式在 IE8 跑不起來，或許換成支援更多 HTML5 特性的 IE9 會好很
多，iammic 就沒去多測，程式在 Firefox 4 與 Chrome 11 則都跑得蠻順暢的，程式主要利用
HTML5 中的 Canvas Element 特性撰寫而成。
程式畫面：
程式碼：
<!DOCTYPE HTML>
<html>
<head>
<style>
body { margin: 0px;
padding: 0px;
}
#myCanvas { border: 1px solid #9C9898;
}
</style>
<script type="text/javascript">
var canvas=null;
var context=null;
var ballX=0;
var ballY=0;
var numX=1;
var numY=1;
window.onload = function(){ canvas=document.getElementById("myCanvas"); context = canvas.getContext("2d"); setInterval(drawBall, 10);
};
function drawBall(){
if (ballX<=0){ numX=1.5;
}
if (ballX>=canvas.height){ numX=-1.5;
}
if (ballY<=0){ numY=1.5;
}
if (ballY>=canvas.width){ numY=-1.5;
}
ballX+=numX;
ballY+=numY;
context.clearRect(0,0,canvas.width, canvas.height);
context.beginPath();
context.arc(ballY, ballX, 10, 0, 2 * Math.PI, false);
context.fillStyle = "#02A817";
context.closePath();
context.fill();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="240">
</canvas>
</body>
</html>
參考網站：
http://www.html5canvastutorials.com/
http://www.w3schools.com/html5/html5_reference.asp