jquery - HTML5 canvas无法使用jquery hover()方法做我想做的事

因此，基本上，我正在尝试制作一个圆，逐渐在用户将鼠标悬停在其上时以不同的阴影填充“边界”。

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

我已经尝试了几件事，包括添加一个名为“ stop”的布尔变量，并将其添加到while循环参数中，此操作无济于事。

我在html上拥有的只是一个略有样式的画布，正如您在我的脚本中所看到的那样，其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

最佳答案

悬停时：


将isHovering标志设置为true。
将引弧百分比变量（pct）重置为0％
启动一个动画循环，该动画循环将pct从0％增加到100％，并根据该pct重新绘制弧。


模糊时：


将isHovering标志设置为false
将绘制百分比的弧度变量（pct）设置为100％（100％会使任何动画停止）。


然后画圆弧：


清除画布，
用灰色填充整个圆弧，
用浅灰色抚摸整个弧线，
如果设置了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>