1

我有一个 HTML-5 画布，其中有一个动画圆圈。参考以下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);

我希望每当用户将鼠标移到圆圈上时，动画应该暂停并且应该显示一条消息。当用户将鼠标移出圆圈时，动画应该从它暂停的点重新开始，并且消息应该消失。请帮助我实现此功能。

4

1 回答 1

0

如果您使用的是 css3 动画，那么 在鼠标悬停时更改 css 属性

-webkit-animation-play-state：暂停 以 暂停您的动画；

并从该点重新开始动画更改css属性

-webkit-animation-play-state ： 运行

来源：http ://css-infos.net/property/-webkit-animation-play-state

注意“ -webkit ”用于基于 webkit 的浏览器；Mozilla使用“ -moz ”，opera 使用“ -o ”等。

于 2013-02-04T07:46:00.437 回答