theme: smartblue
highlight: a11y-dark

本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！

大家好我是ndz，很高兴也很荣幸成为了一名稀土掘金技术社区签约作者，在这里真的很感谢平台给予的肯定和各位读者的支持，感谢 🙏 🙏 🙏。

本文为稀土掘金技术社区签约作者专栏 – 《从Canvas到PixiJs》的第六篇文章，喜欢的小伙伴记得点赞加关注，以防需要用时回来不迷路 😂

前言

在前面的文章中我们已经介绍了 Canvas 基础的内容：

PixiJs学前篇（一）：Canvas基础【绘制篇】

PixiJs学前篇（二）：Canvas基础【图形篇】

PixiJs学前篇（三）：Canvas基础【文字篇】

PixiJs学前篇（四）：Canvas进阶【动画篇】

在之前的文章中我们歇息了Canvas的基础内容和进阶内容中的动画，接下来我们将进入Canvas进阶中的事件篇。

事件

在我们选择用Canvas的时候，往往不仅仅是用来做一些自执行的动画，很多时候我们都会伴随着用户的交互，比如现在比较流行的一些微信小游戏，在线编辑等都是有交互的，那么既然有交互也就意味着需要交互事件。

下面我们就来看一下Canvas中的事件。

鼠标事件

首先咱们还是先回顾一下鼠标的常用事件：

click（点击）
dblclick（双击）
mouseover（鼠标移入）
mouseout（鼠标移出）
mouseenter（鼠标移入）
mouseleave（鼠标移出）
mousedown（鼠标按下）
mouseup（鼠标抬起）
mousemove（鼠标移动）
mousewheel（鼠标滚轮）

以上就是咱们常用的鼠标事件，我们发现其中的mouseover和mouseenter还有mouseout和mouseleave好像是一样的事件，但凭我们的经验虽然看似一样，其实肯定不一样，或者说有区别。

那么他们有什么区别呢？

mouseover和mouseenter都是鼠标移入时触发，但区别是mouseover支持事件冒泡，而mouseenter不支持事件冒泡。简单说就是 mouseover事件在鼠标指针移入被选元素或者是被选元素的任何子元素，都会触发，而mouseenter事件只有在鼠标指针移入被选元素时，才会触发，移入被选元素的子元素不会触发。

mouseout和mouseleave都是鼠标移入时触发，但区别是mouseout支持事件冒泡，而mouseleave不支持事件冒泡。简单说就是 mouseout事件在鼠标指针离开被选元素或者是被选元素的任何子元素，都会触发，而mouseleave事件只有在鼠标指针离开被选元素时，才会触发，离开被选元素的子元素不会触发。

键盘事件

键盘事件相对于鼠标事件就比较简单一些，就三个：

keydown（键盘按下）
keyup（键盘抬起）
keypress（键盘按下）

这里我们常见的其实就是keydown和keyup两个事件，至于keypress事件其实相对于keydown和keyup事件复杂一些。虽然keypress事件和keydown事件都是按下时触发，但也有区别，keypress事件返回的是输入的字符的ASCII码,也就是baiKeyAscii，而keydown事件返回的是键盘码。并且keypress事件虽然也是用户按下键盘上的字符键时触发，但如果按住不让的话，会重复触发此事件。

事件的添加和移除

给Canvas中的元素添加事件我们用的是：addEventListener()方法，移除事件用的是removeEventListener()方法，

下面我们尝试看看如何给Canvas元素中的元素添加鼠标事件和键盘事件。

首先看一下添加鼠标事件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 鼠标事件</title>
</head>
<body>
  <canvas
    id="canvas"
    width="550" 
    height="500" 
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px; margin: 0; padding: 0;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    // 获取Canvas
    const canvas = document.getElementById('canvas'); 
    // 获取绘制上下文
    const ctx = canvas.getContext('2d'); 
    // 给canvas添加鼠标移动事件
    canvas.addEventListener("mousemove", mouseMoving, false);
    function mouseMoving(e) {
      console.log(`当前鼠标在Canvas中的位置: x: ${e.clientX}  y: ${e.clientY}`);
    }
  </script>
</body>
</html>

效果如下：

如图就是给Canvas添加好鼠标移动事件的效果。

Canvas支持所有的鼠标事件，但是并不支持键盘事件，那么想要让Canvas支持键盘事件我们就需要自己处理，这边有两种方法可以实现键盘事件。

方法一：让Canvas自动获取焦点，从而支持键盘事件。

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 键盘事件</title>
  <style>
    * { margin: 0; padding: 0; }
  </style>
</head>
<body>
  <canvas
    id="canvas"
    width="550" 
    height="500" 
    tabindex="0"
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    // 获取Canvas
    const canvas = document.getElementById('canvas'); 
    // 获取绘制上下文
    const ctx = canvas.getContext('2d'); 
    // 给canvas添加键盘事件
    canvas.addEventListener("keydown", doKeydown, false);
    canvas.focus();
    function doKeydown(e) {
      switch(e.keyCode) {
        case 37:
          console.log(`按下左键`)
          break;
        case 38:
        console.log(`按下上键`)
          break;
        case 39:
        console.log(`按下右键`)
          break;
        case 40:
        console.log(`按下下键`)
          break;
      }
    }
  </script>
</body>
</html>

效果如下：

如上所示，当我们自动让Canvas获取焦点以后，这样我们可以实现为Canvas添加键盘事件，但需要注意以下几点：

首先需要为<canvas>标签添加tabindex="0"属性
获取canvas元素以后，需要调用focus()方法让canvas自动获取焦点
需要注意，当鼠标点击别的元素的时候，canvas元素会失去焦点，从而失去键盘事件

方法二：通过为windows对象添加键盘事件，从而控制canvas元素。

这种方法也是我们开发时常用的方法。

下面举例看一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 键盘事件</title>
  <style>
    * { margin: 0; padding: 0; }
  </style>
</head>
<body>
  <canvas
    id="canvas"
    width="500" 
    height="500" 
    tabindex="0"
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    // 获取Canvas
    const canvas = document.getElementById('canvas'); 
    // 获取绘制上下文
    const ctx = canvas.getContext('2d'); 
    // 设置填充的颜色为橘色
    ctx.fillStyle="orange";
    // 获取x,y的值
    let x = canvas.width / 2 - 50;
    let y = canvas.height / 2 - 50;

    // 绘制一个矩形
    ctx.fillRect(x, y, 100, 50);
    // 给canvas添加鼠标移动事件
    window.addEventListener("keydown", doKeydown, false);
  
    function doKeydown(e) {
      ctx.clearRect(0, 0, 500, 500)
      var keyID = e.keyCode ? e.keyCode :e.which;
      switch(e.keyCode) {
        case 37:
          console.log(`按下左键`)
          x = x - 10;
          ctx.fillRect(x, y, 100, 50);
          break;
        case 38:
          console.log(`按下上键`)
          y = y - 10;
          ctx.fillRect(x, y, 100, 50);
          break;
        case 39:
          console.log(`按下右键`)
          x = x + 10;
          ctx.fillRect(x, y, 100, 50);
          break;
        case 40:
          console.log(`按下下键`)
          y = y + 10;
          ctx.fillRect(x, y, 100, 50);
          break;
      }
    }
  </script>
</body>
</html>

效果如下：

如上所示，我们可以通过windows对象控制canvas元素，这也是我们常用的方法。

内部元素添加事件

上面的所有事件其实都是添加到canvas元素上的，但往往在平常的需求中我们需要针对canvas元素内部的子元素做单独的事件交互，那么我们就需要考虑如何给canvas元素的内部元素添加事件。

canvas元素本身并没有提供给内部元素添加事件的Api，正常开发中我们其实也很少会直接使用原生的方式和canvas元素的内部元素进行交互，因为正常开发我们往往会使用canvas的一些成熟的框架或者库（比如Pixi.js）来实现这样的需求，而这样的库中肯定已经封装了为单独元素添加交互的Api。但这里咱们既然学习的是canvas本身，那么咱们就看看如何实现和canvas元素的内部元素进行交互。

这里咱们就以拖拽为例，假如canvas元素内部有多个子元素，那么想拖拽其中一个子元素，我们首先得知道，在鼠标按下的时候是否按在canvas元素的子元素上，只有按在canvas元素的子元素上我们才能对它进行拖拽。

下面咱们就以这个拖拽的案例来说一下。

1、布局

这里我们准备了几个图片，我们先把他绘制到canvas元素中。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 事件</title>
  <style>
    * { margin: 0; padding: 0; }
  </style>
</head>
<body>
  <canvas
    id="canvas"
    width="1000" 
    height="500" 
    tabindex="0"
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    // 获取Canvas
    const canvas = document.getElementById('canvas'); 
    const width = canvas.width;
    const height = canvas.height;
    // 获取绘制上下文
    const ctx = canvas.getContext('2d'); 
    const images = [
      {
        name: "白月魁",
        url: "../images/bailaoban.jpg"
      },
      {
        name: "鸣人",
        url: "../images/mingren.jpg",
      },
      {
        name: "路飞",
        url: "../images/lufei.jpg",
      },
      {
        name: "哪吒",
        url: "../images/nazha.jpg",
      },
      {
        name: "千寻",
        url: "../images/qianxun.jpg",
      },
    ];
   
    images.forEach((item)=>{
      // 创建image元素
      const image = new Image()
      image.src = item.url;
      const name = item.name;
      image.onload = () => {
        // 控制宽度为200（等宽）
        const w = 200;
        // 高度按宽度200的比例缩放
        const h = 200 / image.width * image.height;
        const x = Math.random() * (width - w) ;
        const y = Math.random() * (height - h);
        const imageObj = { image, name, x, y, w, h }
        draw(imageObj)
      }
    })

    // 渲染图片
    function draw(imageObj) {
      ctx.drawImage(imageObj.image, imageObj.x, imageObj.y, imageObj.w, imageObj.h);
    }
  </script>
</body>
</html>

效果如下：

如上所示，把图片随机的绘制到canvas元素中。

2、添加事件

把图片绘制到canvas元素中以后，我们接下来就是为canvas元素添加鼠标按下、鼠标移动和鼠标抬起是哪个事件了。

代码如下：

// 为canvas添加鼠标按下事件
canvas.addEventListener("mousedown", mousedownFn, false)

// 鼠标按下触发的方法
function mousedownFn(e) {
  // 为canvas添加鼠标移动和鼠标抬起事件
  canvas.addEventListener("mousemove", mousemoveFn, false)
  canvas.addEventListener("mouseup", mouseupFn, false)
}

// 鼠标移动触发
function mousemoveFn() {}

// 鼠标抬起触发
function mouseupFn() {}

因为只有鼠标按下才能拖拽，所以我们把鼠标移动和鼠标抬起事件的添加放在鼠标按下的事件中。

3、判断选中元素

定义完事件以后，我们就需要判断每次点击的元素是其中的哪一个，这样我们才能针对这个元素做交互。

判断每次点击的元素是其中的哪一个元素，有两种方法：

方法一：

一种是通过计算，如上面布局的代码，每个图片绘制的x、y、width和height我们都是知道的，那么当我们每次点击下去的时候就可以遍历图片的数据，看我们是否点击到元素上。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 事件</title>
  <style>
    * { margin: 0; padding: 0; }
  </style>
</head>
<body>
  <canvas
    id="canvas"
    width="1000" 
    height="500" 
    tabindex="0"
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    // 获取Canvas
    const canvas = document.getElementById('canvas'); 
    const width = canvas.width;
    const height = canvas.height;
    // 获取绘制上下文
    const ctx = canvas.getContext('2d'); 
    const images = [
      {
        name: "白月魁",
        url: "../images/bailaoban.jpg"
      },
      {
        name: "鸣人",
        url: "../images/mingren.jpg",
      },
      {
        name: "路飞",
        url: "../images/lufei.jpg",
      },
      {
        name: "哪吒",
        url: "../images/nazha.jpg",
      },
      {
        name: "千寻",
        url: "../images/qianxun.jpg",
      },
    ];
    let imagesData = []
    let clickCoordinate = { x: 0, y: 0 }
    let target;
    images.forEach((item)=>{
      // 创建image元素
      const image = new Image()
image.src = item.url;
      const name = item.name;
      image.onload = () => {
        // 控制宽度为200（等宽）
        const w = 200;
        // 高度按宽度200的比例缩放
        const h = 200 / image.width * image.height;
        const x = Math.random() * (width - w) ;
        const y = Math.random() * (height - h);
        const imageObj = { image, name, x, y, w, h }
        imagesData.push(imageObj)
        draw(imageObj)
      }
    })

    // 渲染图片
    function draw(imageObj) {
      ctx.drawImage(imageObj.image, imageObj.x, imageObj.y, imageObj.w, imageObj.h);
    }

    // 为canvas添加鼠标按下事件
    canvas.addEventListener("mousedown", mousedownFn, false)
  
    // 鼠标按下触发的方法
    function mousedownFn(e) {
      // 获取元素按下时的坐标
      clickCoordinate.x = e.pageX - canvas.offsetLeft;
      clickCoordinate.y = e.pageY - canvas.offsetTop;
      // 判断选中的元素是哪一个
      checkElement()
      // 为canvas添加鼠标移动和鼠标抬起事件
      canvas.addEventListener("mousemove", mousemoveFn, false)
      canvas.addEventListener("mouseup", mouseupFn, false)
    }
    // 鼠标移动触发
    function mousemoveFn() {}

    // 鼠标抬起触发
    function mouseupFn() {}

    function checkElement() {
      imagesData.forEach((item, index)=>{
        const minX = item.x
        const maxX = item.x + item.w
        const minY = item.y
        const maxY = item.y + item.h
        if(minX <= clickCoordinate.x && clickCoordinate.x <= maxX && minY <= clickCoordinate.y && clickCoordinate.y <= maxY) {
          target = index
          console.log("点击的元素是：", item.name)
        }
      })
      
    }

  </script>
</body>
</html>

效果如下：

除了计算其实我们还可以利用canvas元素自身提供的方法来确定咱们选中的元素是哪一个。

方法二：

这里利用的是：isPointInPath()方法，此方法可以把坐标传入，然后判断是否在路径之内。

语法：isPointInPath(x, y) x为监测点的x坐标，y为监测点的y坐标。

这里需要注意的是，在我们的案例中，我们是通过drawImage()方法把图片绘制到canvas元素上，而drawImage()方法不支持isPointInPath()方法的路径检测，这里我们就需使用绘制路径的方法，因此在绘制图片的时候，我们就需要同时绘制一个一样大小的路径。

绘制方法就需要修改为：

// 渲染图片
function draw(imageObj) {
  ctx.drawImage(imageObj.image, imageObj.x, imageObj.y, imageObj.w, imageObj.h);
  ctx.beginPath();
  ctx.strokeStyle = "#fff";
  ctx.rect(imageObj.x, imageObj.y, imageObj.w, imageObj.h);
  ctx.stroke();
}

检测选中元素的方法修改为：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 事件</title>
  <style>
    * { margin: 0; padding: 0; }
  </style>
</head>
<body>
  <canvas
    id="canvas"
    width="1000" 
    height="500" 
    tabindex="0"
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    // 获取Canvas
    const canvas = document.getElementById('canvas'); 
    const width = canvas.width;
    const height = canvas.height;
    // 获取绘制上下文
    const ctx = canvas.getContext('2d'); 
    const images = [
      {
        name: "白月魁",
        url: "../images/bailaoban.jpg"
      },
      {
        name: "鸣人",
        url: "../images/mingren.jpg",
      },
      {
        name: "路飞",
        url: "../images/lufei.jpg",
      },
      {
        name: "哪吒",
        url: "../images/nazha.jpg",
      },
      {
        name: "千寻",
        url: "../images/qianxun.jpg",
      },
    ];
    let imagesData = []
    let clickCoordinate = { x: 0, y: 0 }
    let target;
    images.forEach((item)=>{
      // 创建image元素
      const image = new Image()
image.src = item.url;
      const name = item.name;
      image.onload = () => {
        // 控制宽度为200（等宽）
        const w = 200;
        // 高度按宽度200的比例缩放
        const h = 200 / image.width * image.height;
        const x = Math.random() * (width - w) ;
        const y = Math.random() * (height - h);
        const imageObj = { image, name, x, y, w, h }
        imagesData.push(imageObj)
        draw(imageObj)
      }
    })

    // 渲染图片
    function draw(imageObj) {
      ctx.drawImage(imageObj.image, imageObj.x, imageObj.y, imageObj.w, imageObj.h);
      ctx.beginPath();
      ctx.strokeStyle = "#fff";
      ctx.rect(imageObj.x, imageObj.y, imageObj.w, imageObj.h);
      ctx.stroke();
    }

    // 为canvas添加鼠标按下事件
    canvas.addEventListener("mousedown", mousedownFn, false)
  
    // 鼠标按下触发的方法
    function mousedownFn(e) {
      // 获取元素按下时的坐标
      clickCoordinate.x = e.pageX - canvas.offsetLeft;
      clickCoordinate.y = e.pageY - canvas.offsetTop;
      // 判断选中的元素是哪一个
      checkElement()
      // 为canvas添加鼠标移动和鼠标抬起事件
      canvas.addEventListener("mousemove", mousemoveFn, false)
      canvas.addEventListener("mouseup", mouseupFn, false)
    }
    // 鼠标移动触发
    function mousemoveFn() {}

    // 鼠标抬起触发
    function mouseupFn() {}

    // 检测选中的元素是哪一个
    function checkElement() {
      imagesData.forEach((item, index)=>{
        draw(item)
        if(ctx.isPointInPath(clickCoordinate.x, clickCoordinate.y)) {
          target = index
          console.log("点击的元素是：", item.name)
        }
      })
    }

  </script>
</body>
</html>

效果如下：

4、编写移动的方法

知道选中的元素以后，我们就需要在移动的时候把移动的坐标赋值给选中的元素，让选中的元素跟着鼠标移动。

移动的方法如下：

 // 鼠标移动触发
function mousemoveFn(e) {
  const moveX = e.pageX
  const moveY = e.pageY
  // 计算移动元素的坐标
  imagesData[target].x = imagesData[target].x + ( moveX - clickCoordinate.x );
  imagesData[target].y = imagesData[target].y + ( moveY - clickCoordinate.y ); 
  // 清空画布
                    ctx.clearRect(0, 0, width, height);
  // 清空画布以后重新绘制
  imagesData.forEach((i) => draw(i))
  // 赋值
  clickCoordinate.x = moveX; 
  clickCoordinate.y = moveY;
}

// 鼠标抬起触发
function mouseupFn() {
  // 鼠标抬起以后移除事件
  canvas.removeEventListener("mousemove", mousemoveFn, false)
  canvas.removeEventListener("mouseup", mouseupFn, false)
  // 销毁选中元素
  target = undefined
}

到此咱们的相册拖拽案例就算完成了，看一下整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas - 事件</title>
  <style>
    * { margin: 0; padding: 0; }
  </style>
</head>
<body>
  <canvas
    id="canvas"
    width="1000" 
    height="500" 
    tabindex="0"
    style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px;">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    // 获取Canvas
    const canvas = document.getElementById('canvas'); 
    const width = canvas.width;
    const height = canvas.height;
    // 获取绘制上下文
    const ctx = canvas.getContext('2d'); 
    const images = [
      {
        name: "白月魁",
        url: "../images/bailaoban.jpg"
      },
      {
        name: "鸣人",
        url: "../images/mingren.jpg",
      },
      {
        name: "路飞",
        url: "../images/lufei.jpg",
      },
      {
        name: "哪吒",
        url: "../images/nazha.jpg",
      },
      {
        name: "千寻",
        url: "../images/qianxun.jpg",
      },
    ];
    let imagesData = []
    let clickCoordinate = { x: 0, y: 0 }
    let target;
    images.forEach((item)=>{
      // 创建image元素
      const image = new Image()
image.src = item.url;
      const name = item.name;
      image.onload = () => {
        // 控制宽度为200（等宽）
        const w = 200;
        // 高度按宽度200的比例缩放
        const h = 200 / image.width * image.height;
        const x = Math.random() * (width - w) ;
        const y = Math.random() * (height - h);
        const imageObj = { image, name, x, y, w, h }
        imagesData.push(imageObj)
        draw(imageObj)
      }
    })

    // 渲染图片
    function draw(imageObj) {
      ctx.drawImage(imageObj.image, imageObj.x, imageObj.y, imageObj.w, imageObj.h);
      ctx.beginPath();
      ctx.strokeStyle = "#fff";
      ctx.rect(imageObj.x, imageObj.y, imageObj.w, imageObj.h);
      ctx.stroke();
    }

    // 为canvas添加鼠标按下事件
    canvas.addEventListener("mousedown", mousedownFn, false)
  
    // 鼠标按下触发的方法
    function mousedownFn(e) {
      // 获取元素按下时的坐标
      clickCoordinate.x = e.pageX - canvas.offsetLeft;
      clickCoordinate.y = e.pageY - canvas.offsetTop;
      // 判断选中的元素是哪一个
      checkElement()
      // 未选中元素则return
      if(target !== undefined) return;
      // 为canvas添加鼠标移动和鼠标抬起事件
      canvas.addEventListener("mousemove", mousemoveFn, false)
      canvas.addEventListener("mouseup", mouseupFn, false)
    }

    // 鼠标移动触发
    function mousemoveFn(e) {
      const moveX = e.pageX
      const moveY = e.pageY
      // 计算移动元素的坐标
      imagesData[target].x = imagesData[target].x + ( moveX - clickCoordinate.x );
      imagesData[target].y = imagesData[target].y + ( moveY - clickCoordinate.y ); 
      // 清空画布
      ctx.clearRect(0, 0, width, height);
      // 清空画布以后重新绘制
      imagesData.forEach((i) => draw(i))
      // 赋值
      clickCoordinate.x = moveX; 
      clickCoordinate.y = moveY;
    }

    // 鼠标抬起触发
    function mouseupFn() {
      // 鼠标抬起以后移除事件
      canvas.removeEventListener("mousemove", mousemoveFn, false)
      canvas.removeEventListener("mouseup", mouseupFn, false)
      // 销毁选中元素
      target = undefined
    }

    // 检测选中的元素是哪一个
    function checkElement() {
      imagesData.forEach((item, index)=>{
        draw(item)
        if(ctx.isPointInPath(clickCoordinate.x, clickCoordinate.y)) {
          target = index
          console.log("点击的元素是：", item.name)
        }
      })
    }

  </script>
</body>
</html>

咱们看一下具体的效果：

到此咱们的Canvas事件篇就算完成了，在日常咱们的开发中其实主要要是用Pixi等框架来实现，直接用Canvas元素来实现的话开发的效率肯定比较低。

下一篇文章咱们就来唠唠Canvas的的应用吧，介绍几个我们常用的案例。

文章版权归作者所有，未经允许请勿转载。

THE END