click หยุด click เดิน HTML5 – การจัดการความรู้ (KM)

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

<!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 drawRect(myRectangle){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

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();

}

function animate(lastTime, myRectangle, animProp){

if (animProp.animate) {

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

drawRect(myRectangle);

// request new frame

requestAnimFrame(function(){

animate(lastTime, myRectangle, animProp);

});

}

window.onload = function(){

var myRectangle = {

x: 0,

y: 50,

width: 100,

height: 50,

borderWidth: 5

};

/*

* make the animation properties an object

* so that it can be modified by reference

* from an event

*/

var animProp = {

animate: false

};

// add click listener to canvas

document.getElementById("myCanvas").addEventListener("click", function(){

if (animProp.animate) {

animProp.animate = false;

}

else {

animProp.animate = true;

var date = new Date();

var time = date.getTime();

animate(time, myRectangle, animProp);

}

});

drawRect(myRectangle);

};

</script>

</head>

<body onmousedown="return false;">

<canvas id="myCanvas" width="578" height="200">

</canvas>

</body>

</html>