我可以檢測鼠標當前是否在畫布繪制功能內移動嗎？

Question

我正在HTML5畫布中繪制一個矩形。 繪制時，我希望它是一種顏色（透明），繪制完后，我希望它是另一種顏色（不透明）。 我可以在繪圖函數中說出某種方式（也許使用條件）來檢測此時鼠標是否在移動嗎？ 即

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

更好的是，更改onleftmouseup的顏色。 但是，因為我要遍歷一個框架並覆蓋一個draw方法，所以如果可以在draw方法中進行操作會更好。 本身。 這可能嗎？

Answer 1

您需要將onmousedown和onmouseup事件偵聽器附加到canvas元素，該元素設置一個布爾值，該布爾值可以通過draw函數的作用域訪問。

就像是：

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

};