javascript - 我可以检测鼠标当前是否在 Canvas 绘制函数内移动吗？

Question

我正在 HTML5 Canvas 中绘制一个矩形。我希望在绘制它时它是一种颜色(透明)，然后当我完成绘制它时它是另一种颜色(不透明)。有没有一种方法可以在我的绘图函数中说，也许使用条件，来检测鼠标此时是否正在移动？即

      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();
      }

更好的是，更改鼠标左键上的颜色。但是，因为我正在使用框架并重写绘制方法，所以如果我可以在绘制方法中执行此操作会更好。本身。这可能吗？

Answer 1

您需要将 onmousedown 和 onmouseup 事件监听器附加到您的 canvas 元素，该元素设置一个可由绘图函数范围访问的 bool 值。

类似于:

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)";
    }
    ...

};