Canvas 交互

最后的结果，动下鼠标~：https://codepen.io/yuqianma/pen/MzNWdp

新建或复用网页略……

在上上上上面的div例子中，我们有一个简单的交互。（就是由“事件”触发了预定义的结果。）
我们把这样的过程叫“添加事件监听”。

能不能直接在js中加上事件监听？

JS添加Dom事件监听

当然可以，例如这样：

canvas.onclick = function () {
  console.log(new Date());
}

其实，API给了我们更多信息：

先给canvas加个边框。方便观察。

canvas.onclick = function () {
  rect(50, 50, 100, 100, '#0bd');
}

点击一下，就画了一个矩形。

click 点击事件之外，还有很多事件，我们常用的有：mouseover mousemove mouseout 等。

https://developer.mozilla.org/zh-CN/docs/Web/Events

这里有个问题，canvas是一整个画布，我们怎么和上面已经有的图形交互呢？

想一下你怎么知道鼠标在图形上面？

通过位置判断

这么原始想不到吧

API通过参数，给我们提供了更多的信息，观察Console：

canvas.onclick = function (e) {
  console.log(e);
}

我们发现 e.offsetX e.offsetY 就是画布上的坐标。

rect(50, 50, 100, 100, '#0bd');

canvas.onmousemove = function (e) {
  if (50 <= e.offsetX && e.offsetX <= 150
    && 50 <= e.offsetY && e.offsetY <= 150 ) {
    console.log('You hoverd me!');
  }
}

如果我们在矩形上的时候绘制一个红色的矩形；不在的时候绘制一个蓝色的：

rect(50, 50, 100, 100, '#0bd');

canvas.onmousemove = function (e) {
  if (50 <= e.offsetX && e.offsetX <= 150
    && 50 <= e.offsetY && e.offsetY <= 150 ) {
    // console.log('You hoverd me!');
    rect(50, 50, 100, 100, '#e55');
  } else {
    rect(50, 50, 100, 100, '#0bd');
  }
}