Question

我们如何仅在鼠标悬停时才能为使用html canvas绘制的圆提供阴影和笔触。

我有两个圆，希望在鼠标悬停时有阴影和笔触，但是当我将鼠标悬停在圆圈上时，代码会添加阴影和笔触，但是一旦鼠标移出圆圈，阴影就会变暗但不会消失

<html>

<body>
    <canvas id="myCanvas"  width="1000" height="500" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
</body>

<script>
var canvas = document.getElementById("myCanvas"),
    ctx = canvas.getContext("2d"),
    circle = [
        {x: 60, y: 50, r: 40, },
        {x: 100, y: 150, r: 50,}// etc.
    ];

// render initial rects.
for (var i = 0; i < circle.length; i++) {

  ctx.beginPath();
 ctx.arc(circle[i].x, circle[i].y, circle[i].r,0,2*Math.PI);
 ctx.fillStyle= "grey";
 ctx.fill();
}


    canvas.onmousemove = function (e){
     //  console.log("mouseover");
        var cir = this.getBoundingClientRect(),
          x= e.clientX - cir.left,
          y = e.clientX - cir.top,
          i = 0 , r;

          console.log(r);
         // ctx.clearRect(0, 0, c.width, c.height);

         while (r = circle[i++])
         {
             ctx.beginPath();
             ctx.arc(r.x,r.y,r.r,0,2*Math.PI)

             if (ctx.isPointInPath(x, y))
             {
             ctx.shadowBlur= 10;
             ctx.shadowColor = "grey"; 


             ctx.lineWidth = 3;
             ctx.strokeStyle = 'rgb(255,255,255)'
             ctx.stroke();
             }
             else
             {
                ctx.arc(r.x,r.y,r.r,0,2*Math.PI)
             }

         }

    };

</script>
</html>

Answer 1

canvas.onmousemove = function (e){

        var cir = this.getBoundingClientRect(),
          x= e.clientX - cir.left,
          y = e.clientX - cir.top,
          i = 0 , r;

         /* add this */
         ctx.clearRect(0, 0, canvas.width, canvas.height);

         while (r = circle[i++])
         {
             ctx.beginPath();
             ctx.arc(r.x,r.y,r.r,0,2*Math.PI)

             if (ctx.isPointInPath(x, y))
             {
             ctx.shadowBlur= 10;
             ctx.shadowColor = "grey"; 


             ctx.lineWidth = 3;
             ctx.strokeStyle = 'rgb(255,255,255)'
             ctx.stroke();
             }
             else
             {
                ctx.arc(r.x,r.y,r.r,0,2*Math.PI)
             }

         }

        /* add this */
        for (var i = 0; i < circle.length; i++) {

          ctx.beginPath();
          ctx.arc(circle[i].x, circle[i].y, circle[i].r,0,2*Math.PI);
          ctx.fillStyle= "grey";
          ctx.fill();
        }

    };

Answer 2

我已经修改了您的代码，以在鼠标悬停时添加笔触。

<html>

<body>
  <canvas id="myCanvas" width="1000" height="500" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
</body>

<script>
  var canvas = document.getElementById("myCanvas"),
    ctx = canvas.getContext("2d"),
    circle = [{
        x: 60,
        y: 50,
        r: 40,
      },
      {
        x: 100,
        y: 150,
        r: 50,
      } // etc.
    ];

  // render initial rects.
  for (var i = 0; i < circle.length; i++) {

    ctx.beginPath();
    ctx.arc(circle[i].x, circle[i].y, circle[i].r, 0, 2 * Math.PI);
    ctx.fillStyle = "blue";
    ctx.fill();
  }

  canvas.onmousemove = function(e) {
    var x = e.clientX,
      y = e.clientY,
      i = 0,
      r;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (let i = 0; i < circle.length; i++) {
      if ((x > circle[i].x - circle[i].r) && (y > circle[i].y - circle[i].r) && (x < circle[i].x + circle[i].r) && (y < circle[i].y + circle[i].r)) {


        ctx.beginPath();
        ctx.arc(circle[i].x, circle[i].y, circle[i].r, 0, 2 * Math.PI);
        ctx.fillStyle = "blue";
        ctx.fill();
        ctx.shadowBlur = 10;
        ctx.lineWidth = 3;
        ctx.strokeStyle = 'rgb(255,255,255)';
        ctx.shadowColor = 'grey';
        ctx.stroke();
        ctx.shadowColor = 'white';
        ctx.shadowBlur = 0;

      } else {

        ctx.beginPath();
        ctx.arc(circle[i].x, circle[i].y, circle[i].r, 0, 2 * Math.PI);
        ctx.fillStyle = "blue";
        ctx.fill();
        ctx.shadowColor = 'white';
        ctx.shadowBlur = 0;
      }

    }

  };
</script>

</html>

如何仅在画布中的mousemove上添加笔触和阴影？

2 个答案: