โดย สมโภชน์ กุลธารารมณ์
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.requestAnimFrame = (function(callback)
{
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback)
{
window.setTimeout(callback, 1000 / 60);
}; })();
function animate(lastTime, myRectangle)
{
var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”); // update
var date = new Date();
var time = date.getTime();
var timeDiff = time – lastTime;
var linearSpeed = 100; // pixels / second
var linearDistEachFrame = linearSpeed * timeDiff / 1000;
var currentX = myRectangle.x;
if (currentX < canvas.width – myRectangle.width – myRectangle.borderWidth / 2)
{
var newX = currentX + linearDistEachFrame;
myRectangle.x = newX;
}
lastTime = time; // clear
context.clearRect(0, 0, canvas.width, canvas.height); // draw
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = “#8ED6FF”;
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = “black”;
context.stroke(); // request new frame
requestAnimFrame(function(){ animate(lastTime, myRectangle); });
}
window.onload = function()
{
var myRectangle = { x: 0, y: 50, width: 100, height: 50, borderWidth: 5 };
var date = new Date();
var time = date.getTime();
animate(time, myRectangle);
};
</script>
</head>
<body onmousedown=”return false;”>
<canvas id=”myCanvas” width=”578″ height=”200″>
</canvas>
</body>
</html>
