HTML5 Canvas启动和停止动画
gooood个人博客网站
canvas
要启动HTML5 Canvas动画，我们可以不断请求新的动画帧，并停止HTML5 Canvas动画，我们可以简单地不请求新的动画帧。
说明：单击画布以开始和停止动画。
html代码：
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas></canvas> <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, context) { 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, runAnimation, canvas, context) { if(runAnimation.value) { // update var time = (new Date()).getTime(); var timeDiff = time - lastTime; // pixels / second var linearSpeed = 100; 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; } // clear context.clearRect(0, 0, canvas.width, canvas.height); // draw drawRect(myRectangle, context); // request new frame requestAnimFrame(function() { animate(time, myRectangle, runAnimation, canvas, context); }); } } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var myRectangle = { x: 0, y: 75, width: 100, height: 50, borderWidth: 5 }; /* * define the runAnimation boolean as an obect * so that it can be modified by reference */ var runAnimation = { value: false }; // add click listener to canvas document.getElementById('myCanvas').addEventListener('click', function() { // flip flag runAnimation.value = !runAnimation.value; if(runAnimation.value) { var date = new Date(); var time = date.getTime(); animate(time, myRectangle, runAnimation, canvas, context); } }); drawRect(myRectangle, context); </script> </body> </html>