鼠標懸停在動畫中的HTML-5畫布圖像播放/暫停

Question

我有一個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); 

我希望每當用戶將鼠標放在圓上時，動畫應該暫停並顯示一條消息。當用戶將鼠標移出圓圈時，動畫應從其暫停的位置重新開始，並且該消息也應該消失。請幫助我實現此功能。

Answer 1

如果您在鼠標更改CSS屬性

-webkit-動畫播放狀態下使用CSS3動畫然後 ：到暫停 暫停您的動畫;

，並從該點再次啓動動畫改變CSS屬性

-webkit-動畫播放狀態：到運行

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

NB用於基於webkit的瀏覽器的「-webkit」使用 「-moz」 爲Mozilla， 「-o」 歌劇等