canvas有哪些事件

1. Canvas介绍

Canvas 是 HTML5 中新增的组件，它是一个可以使用 JavaScript 绘制图形和动画的 HTML 元素。在 Web 上做 2D 游戏或者用来做图表效果都非常方便。大家可能最熟悉的就是 3D 建模软件在绘制 3D 模型时可以使用 Canvas 来做预览。下面我们来看看 Canvas 上有哪些常用的事件。

2. Canvas事件

Canvas 元素支持以下事件:

click

mousedown

mouseup

mousemove

2.1 click 事件

在 Canvas 上单击鼠标后，会触发 click 事件。click 事件监听器接受一个 MouseEvent 类型的事件对象实例作为参数，包含鼠标点击时的坐标，可以在事件监听器中使用这些坐标做出响应.

canvas.addEventListener('click', function(event) {

  // event.clientX 为鼠标点击时的窗口相对坐标
  console.log('鼠标坐标:', event.clientX, event.clientY);
});

上述代码用于监听鼠标点击事件，并且输出点击时鼠标的坐标。

2.2 mousedown 事件

当鼠标按下去，会触发 mousedown 事件。可以使用这个事件来开发画笔或者拖动元素。

canvas.addEventListener('mousedown', function(event) {

  isMouseDown = true;
  lastPoint = {
    x: event.clientX,
    y: event.clientY
  };
});

上述代码用于开发一个画笔工具，当按下鼠标时会将 isMouseDown 设置为 true 并且储存鼠标当前的坐标。

2.3 mouseup 事件

当鼠标释放时，会触发 mouseup 事件。

canvas.addEventListener('mouseup', function(event) {

  isMouseDown = false;
});

上述代码用于开发画笔工具，在鼠标释放时将 isMouseDown 设置为 false。

2.4 mousemove 事件

当鼠标移动时，会触发 mousemove 事件。这个事件非常常用，在开发任何简单的移动应用中都可能会涉及到鼠标移动。

canvas.addEventListener('mousemove', function(event) {

  if (isMouseDown) {
    var currentPoint = {
      x: event.clientX,
      y: event.clientY
    };
    // 画笔绘制
    drawLine(lastPoint, currentPoint);
    lastPoint = currentPoint;
  }
});

上述代码用于开发画笔工具，在移动画笔时跟随鼠标运动，绘制画笔轨迹。

3. 结论

这篇文章简要介绍了 Canvas 的基本操作，在开发中只了解以上几个事件是绰绰有余的。然而 Canvas 还有更多的操作和事件，在实际应用中开发人员需要对 Canvas 的特性有一个更深的理解，才能充分发挥 Canvas 的用途。