โดย สมโภชน์ กุลธารารมณ์
<!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(myRectangle)
{
var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”); // update
var date = new Date();
var time = date.getTime();
var amplitude = 150;
var period = 2000; // in ms
var centerX = canvas.width / 2 – myRectangle.width / 2;
var nextX = amplitude * Math.sin(time * 2 * Math.PI / period) + centerX;
myRectangle.x = nextX; // 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(myRectangle); });
}
window.onload = function()
{
var myRectangle =
{
x: 250, y: 70, width: 100, height: 50, borderWidth: 5
};
animate(myRectangle);
};
</script>
</head>
<body onmousedown=”return false;”>
<canvas id=”myCanvas” width=”578″ height=”200″>
</canvas>
</body>
</html>
