Как добавить обводку и тень только на мышиную на холсте? - PullRequest
Новая
       17

Как добавить обводку и тень только на мышиную на холсте?

0 голосов
/ 16 мая 2019

как мы можем дать тень и обводку для круга, нарисованного с помощью HTML-холста, только при наведении мыши.

У меня есть два круга и я хочу иметь тень и обводку при наведении мыши, но когда я наводю курсор на круги, код добавляет тень и обводку, но как только мышь сфокусируется из кругов, тень становится темнее, но не исчезает . 

<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>

Ответы [ 2 ]

0 голосов
/ 16 мая 2019

Я изменил ваш код, чтобы добавить наведенную мышку. 

<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>
0 голосов
/ 16 мая 2019 
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();
        }

    };
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...