jquery - HTML5 canvas 没有用 jquery hide() 方法做我想要的事情

Question

所以基本上我试图制作一个圆圈，当用户将鼠标悬停在其上时，该圆圈会逐渐用不同的阴影填充“边框”。

它工作得很好，但我希望它在用户没有悬停时消失，并在用户将鼠标悬停在圆圈顶部时“重新启动”。相反，无论参数如何，它都会继续 while 循环。

我尝试了一些方法，包括添加一个名为“stop”的 bool 变量，并将其添加到 while 循环参数中，但它什么也不做。

我在 html 上拥有的只是一个稍有样式的 Canvas ，正如您在我的脚本中看到的那样，它的 ID 为“wheel1”。这是我的 JavaScript:

var c = document.getElementById("wheel1");
var ctx = c.getContext("2d");
var y = 0;
var stop = false;

var topCircle = function() {
  ctx.beginPath();
  ctx.fillStyle = "#AAAAAA";
  ctx.arc(50, 50, 40, 0, 2 * Math.PI);
  ctx.fill();
  ctx.closePath();
}

var origCircle = function() {
  ctx.beginPath();
  ctx.fillStyle = "#CCCCCC";
  ctx.arc(50, 50, 50, 0, 2 * Math.PI);
  ctx.fill();
  ctx.closePath();
  topCircle();
}

function hoverEffect(x) {
  setTimeout(function() { 
    ctx.beginPath();
    ctx.fillStyle = "#000000";
    ctx.moveTo(50, 50);
    ctx.arc(50, 50, 50, (1.5 + x/1000) * Math.PI, (1.555 + x/1000) * Math.PI);
    ctx.lineTo(50, 50);
    ctx.fill();
    ctx.closePath();
    topCircle();
  }, (x/2));
}

origCircle();
$('#wheel1').hover(function() {
  stop = false;
  do {
    hoverEffect(y);
    y += 50;
  } 
  while (y <= 2000 && stop == false);
}, function() {
  stop = true;
  y = 0;
  origCircle();
});

编辑:Jquery 1.11.3 api 位于 head 中，这里是 FIDDLE

Answer 1

悬停时:

• 将 isHovering 标志设置为 true。
• 将绘制弧线百分比变量 (pct) 重置为 0%
• 启动一个动画循环，随着时间的推移将 pct 从 0% 增加到 100%，并根据该 pct 重新绘制弧线。

模糊时:

• 将 isHovering 标志设置为 false
• 将绘制弧线百分比变量 (pct) 设置为 100%(100% 会导致所有动画停止)。

然后绘制圆弧:

• 清除 Canvas ，
• 用灰色填充整个弧线，
• 用浅灰色描出完整的弧线，
• 如果设置了 isHovering 标志，则根据要绘制的弧线百分比用黑色描边弧线。

这里是示例代码和演示:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
ctx.lineWidth=12;
ctx.fillStyle='gray';

var PI=Math.PI;
var PI2=PI*2;
var cx=cw/2;
var cy=ch/2;
var radius=Math.min(cx,cy)-ctx.lineWidth/2;
var pct=0;
var pctIncrement=100/60;
var startAngle=-PI/2;
var hoverStyle='black';
var blurStyle='lightgray';
var isHovering=false;

draw()

function draw(){

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

  // always draw blur arc
  ctx.beginPath();
  ctx.arc(cx,cy,radius,startAngle,startAngle+PI2);
  ctx.strokeStyle=blurStyle;
  ctx.fill();
  ctx.stroke();

  // draw hover arc when hovering
  if(isHovering){
    ctx.beginPath();
    ctx.arc(cx,cy,radius,startAngle,startAngle+PI2*pct/100);
    ctx.strokeStyle=hoverStyle;
    ctx.stroke();
  }
}

//
function animate(time){

  draw();

  pct+=pctIncrement;
  if(pct>100){pct=100;}

  if(isHovering && pct<=100){
    requestAnimationFrame(animate);
  }

}

$("#canvas").hover(
  function(){
    isHovering=true;
    pct=0;
    requestAnimationFrame(animate);
  },
  function(){
    isHovering=false;
    pct=100;
    draw();
  }
);

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Hover over the red canvas.</h4>
<canvas id="canvas" width=100 height=100></canvas>