一个Canvas如何设置点击事件?

一个Canvas如何设置点击事件?,第1张

<div id=cd>

<canvas width="300" height="300" style="border:1px solid #c3c3c3">

</canvas>

</div>

<scripr>

var pp=document.getElementById("cd")

pp.onclick=function(e){

e=e||event

var x=e.clientX-pp.offsetLeft//获取点击后x的坐标

var y=e.clientY-pp.offsetTop//获取点击后y的坐标

alert(x)

alert(y)

}

</scripr>

只能获取鼠标对于画布的事件,可以根据点击范围判断点击的内容,然后做相应 *** 作

<!doctype html>

<html>

<head></head>

<body>

<canvas id="canvas" width="500" height="500" style = "border:1px solid red"></canvas>

<script>

var rect={x:100,y:100,w:40,h:20}//定义要画的矩形的位置属性

var canvas=document.getElementById('canvas')

var cxt=canvas.getContext('2d')

cxt.fillRect(rect.x,rect.y,rect.w,rect.h)//绘制矩形

canvas.onclick=function(e){//给canvas添加点击事件

    e=e||event//获取事件对象

    //获取事件在canvas中发生的位置

    var x=e.clientX-canvas.offsetLeft

    var y=e.clientY-canvas.offsetTop

    //如果事件位置在矩形区域中

    if(x>=rect.x&&x<=rect.x+rect.w&&y>=rect.y&&y<=rect.y+rect.h){

        window.open('链接地址')//打开指定链接

    }

}

</script>

</body>

</html>

canvas真挺click事件,然后自己计算是否点在了图形上。 可以直接用引擎,事件都是封装好了的。

canvas元素的omclick等事件就可以啊,我不清楚如何获得canvas的坐标,因为我要区分单击的是哪个位置


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11942911.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存