เคลื่อนไหวแบบลบและวาดใหม่อย่างรวดเร็ว

โดย สมโภชน์ กุลธารารมณ์

<!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>