我有一个 HTML-5 Canvas ,其中有一个动画圆圈。引用如下JS代码。
function doFirst(){
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
centerX = canvas.width / 4;
centerY = canvas.height / 4;
radius = 20;
dy=4;
drawCircle(centerX,centerY,radius);
myVar=setInterval(moveCirc,40);
}
function moveCirc(){
context.clearRect(0,0,canvas.width,canvas.height);
drawCircle(centerX,centerY,radius);
centerY+=dy;
if(centerY>canvas.height-50)
clearInterval(myVar);
}
function drawCircle(x,y,r){
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.fillStyle = 'blue';
context.beginPath();
context.arc(x, y, r, 0, 2 * Math.PI, true);
context.stroke();
context.fill();
}
window.addEventListener("load",doFirst,false);
我希望每当用户将鼠标移到圆圈上时,动画就会暂停并显示一条消息。当用户将鼠标移出圆圈时,动画应该从暂停的位置重新开始,并且消息应该消失。请帮助我实现此功能。
最佳答案
如果你使用的是 css3 动画那么 鼠标悬停更改 css 属性
-webkit-animation-play-state:到暂停 暂停动画;
并从该点开始再次启动动画,更改 css 属性
-webkit-animation-play-state:到运行
来源:http://css-infos.net/property/-webkit-animation-play-state
NB "-webkit "用于基于 webkit 的浏览器;对于 Mozilla 使用“-moz”,对于 opera 等使用“-o”。
关于javascript - 将鼠标悬停在动画中的 HTML-5 Canvas 图像上即可播放/暂停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14680148/