我的移动设备/平板电脑上的画布动画有问题。动画运行良好,直到我点击" home"或" switchapp"按钮,然后更改设备"旋转"。当我切换回带有画布动画的浏览器窗口时,它被冻结,它不会再次播放。
这是一个小提琴:jsfiddle.net/nLmjchqv /
是否可以再次运行动画(如重新启动画布)? 是否可以在JavaScript中检测应用程序切换或主页按钮单击?
谢谢。
答案 0 :(得分:0)
您可以收听pageshow
和pagehide
个活动(请参阅MDN)
例如,您可以在cancelAnimationFrame
上致电pagehide
,然后在requestAnimationFrame
上使用pageshow
再次启动动画
答案 1 :(得分:0)
谢谢Christoph,
最后,我找到了一个解决方案,你的建议。
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
//raf polyfill
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
function drawRectangle(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();
}
var rafId;
function animate() {
if (myRectangle.dir == 'right') {
myRectangle.x += 5;
}
if (myRectangle.dir == 'right' && myRectangle.x >= canvas.width - myRectangle.width) {
myRectangle.dir = 'left';
}
if (myRectangle.dir == 'left' && myRectangle.x <= 0) {
myRectangle.dir = 'right';
}
if (myRectangle.dir == 'left') {
myRectangle.x -= 5;
}
// clear
context.clearRect(0, 0, canvas.width, canvas.height);
drawRectangle(myRectangle, context);
// request new frame
rafId = requestAnimationFrame(animate);
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var myRectangle = {
x: 0,
y: 75,
width: 100,
height: 50,
borderWidth: 5,
dir: 'right'
};
animate();
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
cancelAnimationFrame(rafId);
canvas = document.getElementById("myCanvas");
var cw = canvas.width;
var ch = canvas.height;
canvas.outerHTML = "";
delete canvas;
canvas = document.createElement('canvas');
canvas.id = "myCanvas";
canvas.width = cw;
canvas.height = ch;
document.body.appendChild(canvas);
context = canvas.getContext('2d');
rafId = requestAnimationFrame(animate);
}, false);
</script>
这是一个小提琴:http://jsfiddle.net/cszkmsLs/