我可以检测鼠标当前是否在画布绘制函数内移动

Can I detect if the mouse is currently moving inside a canvas draw function?

本文关键字：绘制 函数 移动 布绘制 鼠标 检测 是否 我可以      更新时间：2023-09-26

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

更好的是，改变左键鼠标的颜色。然而，因为我要遍历一个框架并重写一个draw方法，如果我能在draw方法中这样做会更好。本身。这可能吗?

你想要附加一个onmousedown和onmouseup事件监听器到你的画布元素，设置一个布尔值，可以通过你的绘制函数的范围访问。

类似:

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

相关文章：