我可以检测鼠标当前是否在画布绘制功能内移动吗？

Question

I am drawing a rectangle in HTML5 canvas. I want it to be one color (transparent) when I am drawing it, and then another color (opaque) when I am done drawing it. Is there a way that I can say in my draw function, maybe using a conditional, to detect if the mouse is moving at this moment? ie

      draw: function(ctx) {

          ctx.beginPath();
          ctx.rect(this.X, this.Y, this.Width, this.Height);
          if(mouseisMoving) {
              ctx.fillStyle = "rgba(0,0,0,1)";
          }
          else {
          ...
          }
          ctx.fill();
          ctx.stroke();
      }

Even better, change the color onleftmouseup. However, because I am going through a framework and overriding a draw method, it would be better if I could do it inside the draw method. Itself. Is this possible?

Answer 1

You'll want to attach an onmousedown and onmouseup event listener to your canvas element that sets a boolean that's accessible by the scope of your draw function.

Something like:

var mouse = false;

canvas.onmousedown = function () {
    mouse = true;
};

canvas.onmouseup = function () {
    mouse = false;
};

var draw = function (ctx) {
    if (mouse) {
        ctx.fillStyle = "rgba(0,0,0,1)";
    }
    ...

};