绘制圆线然后清除它

我有一个简单的脚本，其中我试图在鼠标移过画布时绘制一个圆圈，大约需要2000毫秒，当鼠标离开画布时，它将擦除圆圈。绘制圆线然后清除它

我得到了大部分工作 - 它正确绘制圆圈，但鼠标没有完全正常工作，因为它不断重新启动。

这是我的代码：

canvas.addEventListener('mouseover',fill,false); 
canvas.addEventListener('mouseout',erase, false); 
function fill(){ 
    circle.animate = true; 
    circle.direction = 1; 
} 
function erase(){ 
    circle.animate = true; 
    circle.direction = 0; 
} 


function maths(){ 
    if(circle.animate == true){ 
     var amount = circle.vector * deltaTime; 
     if(circle.direction == 1){ 
      circle.curAngle += amount; 
     }else if(circle.direction == 0){ 
      circle.curAngle -= amount; 
     } 

     if(circle.curAngle % 2 == 0){ 
      circle.curAngle = 0; 
     } 
     if(circle.curAngle == circle.endAngle){ 
      circle.animate = false; 
     } 

    } 
} 

function draw(){ 
    deltaTime = Date.now() - frame; 
    frame  = Date.now(); 
    maths(); 

    context.clearRect(0,0,canvas.width,canvas.height); 

    context.beginPath(); 
    context.arc(canvas.width/2, canvas.height/2, 100, circle.startAngle * Math.PI, circle.curAngle * Math.PI,false); 
    context.lineWidth = 2; 
    context.strokeStyle = 'blue'; 
    context.stroke(); 

    setTimeout(draw,1); 

} 

frames = Date.now(); 
draw();

我已经用它制成的小提琴太：http://jsfiddle.net/hru7xyfu/，重现错误鼠标移到画布上，并等待它完全填满，然后鼠标出来，你看到它完全擦除后，该圆形不断重新启动。

我哪里错了？

来源

2015-10-16 Sir

'circle.animate = false;'永远不会被执行，通常会发生这种情况，因为您的圈子永远不会是一个完美的圈子，但会变得完整时被删除。一种解决方案是添加某种形式的跟踪变量，以查看该圆在朝某个方向行进时是否通过阈值大小，然后停止所有动画。我正在修改代码 –

@AlexeiDarmin我也注意到我的'％2 == 0'似乎实际上并不工作=/ – Sir

我不确定你想用'％2 == 0'考虑到你的圆圈大小最多为1.5？ –

尝试更换

if(circle.curAngle == circle.endAngle){ 
    circle.animate = false; 
}

：

if(circle.curAngle < circle.endAngle){ 
    circle.curAngle = circle.endAngle 
    circle.animate = false; 
} 
if(circle.curAngle > circle.endAngle + 2){ 
    circle.curAngle = circle.endAngle + 2 
    circle.animate = false; 
}

if语句来解决其中的圈子变得太大的问题，第二个（虽然你看不到它，因为它开始与其自身重叠）

更新的jsfiddle这里： http://jsfiddle.net/hru7xyfu/2/

来源

2015-10-16 03:37:48

似乎工作，干得好！ –

我是否还需要在jsfiddle中将第36行重置为0？我目前似乎无法得到那个重置角度？ – Sir

不，我想你可以把这个if语句（如果（circle.curAngle％2 == 0））和body分开。 –

绘制圆线然后清除它

回答

相关问题