canvas中的鼠标事件(vue及原生)

注: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>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿尔兹

如果觉得有用就推荐给你的朋友吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值