HTML5 canvas 没有用 jquery hover() 方法做我想做的事

Question

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

它工作得很好，但我希望它在用户没有悬停时消失，而当用户悬停在它上面时 "restart" 在圆圈的顶部。相反，无论参数如何，它都会继续 while 循环。

我已经尝试了一些方法，包括添加一个名为 "stop" 的布尔变量，并将其添加到 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 处于领先地位，这里是 FIDDLE

Answer 1

您的问题非常棘手，因为您使用的是超时功能。因此，即使您将鼠标悬停在 canvas 上，悬停事件也会执行并绘制黑色的内圈和外圈。修复它的一种可能方法是启动另一个超时函数，该函数重置 canvas.

的状态

 function reset() {
        setTimeout(function () {
            origCircle();
        }, 900);
    }

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

已更新 fiddle：http://jsfiddle.net/dab65vzb/2/

Answer 2

悬停时：

将 isHovering 标志设置为真。
将绘图百分比变量 (pct) 重置为 0%
开始一个动画循环，随着时间的推移将 pct 从 0% 增加到 100%，并根据 pct.

模糊时：

将 isHovering 标志设置为 false
将 percent-of-arc-to-draw 变量 (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>

HTML5 canvas 没有用 jquery hover() 方法做我想做的事

HTML5 canvas not doing what I want with jquery hover() method

jquery

do-while

html5-canvas