<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="Css/foo.css" rel="stylesheet" />
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/modernizr-1.7.js"></script>
<title></title>
<style>
/*body, html,.MaxBody {
width:100%;
height:100%;
}
#canvasOen {
display:block;
background:#eee;
}*/
</style>
</head>
<body>
<div class="MaxBody" style="position:absolute;top:50px;left:50px;">
<canvas id="canvasOen" width="500" height="500">你的画布不支持此浏览器</canvas>
</div>
<script>
window.addEventListener("load", evetWindwLoaded, false);
//输出操作
var Debugger = function () { };
Debugger.log = function (message) {
try {
console.log(message);
}
catch(exception)
{
return;
}
}
function evetWindwLoaded()
{
canvasApp();
}
function canvasSupport()
{
return Modernizr.canvas;
}
function canvasApp()
{
if (!canvasSupport()) { return; }
var theCanvas = document.getElementById("canvasOen");
var context = theCanvas.getContext("2d");
var speed = 5;
var p1 = { x: 20, y: 20 };
var angle = 35;
var radians = 0;
var xunits = 0;
var yunits =0;
var ball = { x: p1.x, y: p1.y }
updateBall();
function updateBall()
{
radians = angle * Math.PI / 180;
xunits = Math.cos(radians) * speed;
yunits = Math.sin(radians) * speed;
}
setInterval(drawScreen, 33);
function drawScreen()
{
context.fillStyle = ‘#eeeeee‘;
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
context.strokeStyle = ‘#000000‘;
context.strokeRect(1, 1, theCanvas.width - 2, theCanvas.height - 2);
ball.x += xunits;
ball.y += yunits;
context.fillStyle = "#000000";
context.beginPath();
context.arc(ball.x, ball.y, 15, 0, Math.PI*2, true);
context.closePath();
context.fill();
if (ball.x > theCanvas.width-16 || ball.x < 16)
{
angle = 180 - angle;
updateBall();
}
else if (ball.y > theCanvas.height-16 || ball.y < 16)
{
angle = 360 - angle;
updateBall();
}
}
}
</script>
</body>
</html>