Javascript 将鼠标悬停在动画中的HTML-5画布图像上以播放/暂停它
我有一个HTML-5画布,其中有一个圆圈是动画。参考下面的JS代码Javascript 将鼠标悬停在动画中的HTML-5画布图像上以播放/暂停它,javascript,animation,geometry,html5-canvas,dom-events,Javascript,Animation,Geometry,Html5 Canvas,Dom Events,我有一个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(cen
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动画播放状态:至暂停 暂停动画 要从该点再次开始动画,请更改css属性 -webkit动画播放状态:至运行 资料来源: NB“-webkit”用于基于webkit的浏览器;使用“-moz”表示Mozilla,“-o”表示opera等。像这样的画布库可以使这种方法更简单