在悬停时更新HTML5画布矩形吗？

user11406 发表于 Dev

用户名

我有一些代码可以在画布上绘制一个矩形，但是当我将鼠标悬停在该矩形上时，我希望该矩形能够改变颜色。

问题是在绘制矩形后，我不确定如何再次选择它进行调整。

我想做的事：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

$('c.[rectangle]').hover(function(this){
    this.fillStyle = 'red';
    this.fill();
});

用户名

您不能使用画布立即使用此功能。画布只是位图，因此悬停逻辑必须手动实现。

方法如下：

将所有想要的矩形存储为简单对象
对于每个鼠标在canvas元素上移动：
- 获取鼠标位置
- 遍历对象列表
- 使用isPointInPath（）来检测“悬停”
- 重绘两个状态

例子

var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d"),
    rects = [
        {x: 10, y: 10, w: 200, h: 50},
        {x: 50, y: 70, w: 150, h: 30}    // etc.
    ], i = 0, r;

// render initial rects.
while(r = rects[i++]) ctx.rect(r.x, r.y, r.w, r.h);
ctx.fillStyle = "blue"; ctx.fill();

canvas.onmousemove = function(e) {

  // important: correct mouse position:
  var rect = this.getBoundingClientRect(),
      x = e.clientX - rect.left,
      y = e.clientY - rect.top,
      i = 0, r;
  
  ctx.clearRect(0, 0, canvas.width, canvas.height); // for demo
   
  while(r = rects[i++]) {
    // add a single rect to path:
    ctx.beginPath();
    ctx.rect(r.x, r.y, r.w, r.h);    
    
    // check if we hover it, fill red, if not fill it blue
    ctx.fillStyle = ctx.isPointInPath(x, y) ? "red" : "blue";
    ctx.fill();
  }

};