canvas中的鼠标事件（vue及原生）

阿尔兹

已于 2022-03-31 08:58:18 修改

阅读量5k

点赞数 1

分类专栏： Web 文章标签： canvas vue canvas鼠标事件

于 2022-03-30 09:37:50 首次发布

本文链接：https://blog.csdn.net/alzzw/article/details/123827933

版权

Web 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

注：canvas的宽高一定要写在标签上，不要写在css上

一、原生：

可直接打开查看效果（点击屏幕中的图形可弹出提示）

效果：

代码：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas点击</title>
    <style>
        canvas {
            background: #fff;
            border: 1px solid #000
        }
    </style>
</head>

<body>
   <canvas id="mycanvas" width="500" height="500"></canvas>
   <script>
        let canvas = document.getElementById('mycanvas'),
            ctx = canvas.getContext('2d')
        //存储所画图形区域
        //let tempXY = {x,y,r,i},
        let clickXY = []

        ctx.fillStyle = "blue"
        //图形1
        ctx.fillRect(50,50,100,100)
        clickXY.push({id:1,x:50,y:50,r:100,info:"正方形"})

        //图形2
        ctx.fillStyle = "green"
        ctx.arc(200, 200, 50, 0, 2 * Math.PI);
        ctx.fill();

        clickXY.push({id:2,x:(200-50),y:(200-50),r:100,info:"圆形"})

        canvas.addEventListener('click', function(e) {
             var x = event.pageX - canvas.getBoundingClientRect().left
             var y = event.pageY - canvas.getBoundingClientRect().top
            for(let i of clickXY) {
                if (x > i.x  && x < (i.x + i.r) && y > i.y && y < (i.y + i.r)) {
                  alert("这是" + i.info)
                  //这里可以根据i 来确定你需要执行的方法
                  break
                }
            }
        }, false)
   </script>
</body>
</html>

二、Vue

<template>
        <canvas
            id="canvas"
            ref="canvas"
            width="800"
            height="600"
            @mousedown="canvasDown($event)"
            @mouseup="canvasUp($event)"
            @mousemove="canvasMove($event)"
        ></canvas>
</template>

<script>
export default {
  data() {
    return {
      context: {}, // canvas对象
      clickXY: [],
    }
  },
  mounted() {
    this.initDraw()
  },
  methods: {
    initDraw() {
      const canvas = document.querySelector('#canvas')
      this.context = canvas.getContext('2d')

      this.context.fillStyle = "blue"
      //图形1
      this.context.fillRect(50,50,100,100)
      this.clickXY.push({id:1,x:50,y:50,r:100,info:"正方形"})

      //图形2
      this.context.fillStyle = "green"
      this.context.beginPath();
      this.context.arc(200, 200, 50, 0, 2 * Math.PI);
      this.fill();
      this.clickXY.push({id:2,x:(200-50),y:(200-50),r:100,info:"圆形"})
    },
    canvasDown(e) {
      console.log("按下")
      var x = event.pageX - canvas.getBoundingClientRect().left
      var y = event.pageY - canvas.getBoundingClientRect().top
      for(let i of this.clickXY) {
        if (x > i.x  && x < (i.x + i.r) && y > i.y && y < (i.y + i.r)) {
            alert("这是" + i.info)
          //这里可以根据i 来确定你需要执行的方法
          break
        }
    }
    },
    canvasMove(e) {
      console.log("移动")
    },
    canvasUp(e) {
      console.log("抬起")
    },
  }
}
</script>

<style>
#canvas {
    border: 1px solid;
}
</style>