HTML5 Canvas 鼠标点击到图片时进行操作 30
初学Canvas，做一个很简单的小游戏。如题，想判定鼠标点击到一个Image()上并进行操作，但是我的图片不是规则的矩形，是从ps里面抠图弄到的png，请问应该怎么做？本...
初学Canvas，做一个很简单的小游戏。
如题，想判定鼠标点击到一个Image()上并进行操作，但是我的图片不是规则的矩形，是从ps里面抠图弄到的png，请问应该怎么做？本来想用div覆盖上去，但是图片不规则。有什么办法可以直接判定Image()的？
查了一下，addEventListener和onclick貌似都不能用……
求大神解答！ 展开
如题，想判定鼠标点击到一个Image()上并进行操作，但是我的图片不是规则的矩形，是从ps里面抠图弄到的png，请问应该怎么做？本来想用div覆盖上去，但是图片不规则。有什么办法可以直接判定Image()的？
查了一下，addEventListener和onclick貌似都不能用……
求大神解答！ 展开
2017-06-09 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
<!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){
<a href="https://www.baidu.com/s?wd=window.open&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBnHm3mWbLP1bkuWmLmHKb0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3ErHn3n1c1nj04nW64n1cLnHnz" target="_blank" class="baidu-highlight">window.open</a>('链接地址');//打开指定链接
}
}
</script>
</body>
</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){
<a href="https://www.baidu.com/s?wd=window.open&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBnHm3mWbLP1bkuWmLmHKb0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3ErHn3n1c1nj04nW64n1cLnHnz" target="_blank" class="baidu-highlight">window.open</a>('链接地址');//打开指定链接
}
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
