使用 isPointInPath 函数来设置canvas事件

最新推荐文章于 2021-04-27 16:48:04 发布

doct2279

最新推荐文章于 2021-04-27 16:48:04 发布

阅读量136

点赞数 1

原文链接：http://www.cnblogs.com/xlx123/p/7978495.html

版权

最近看了一下canvas，很好奇一张图片是如何点击不同的地方触发事件的。
查询了一下，canvas本身有一个函数 isPointInPath(x, y) 可以输入x,y坐标，定位一个点，这个函数返回的是一个布尔值，如果这个点出现在绘制的图像里，那么就会返回true，否则返回false，
那我们就可以根据这个方法来判断“设定的点”或者“鼠标指针”是否触碰到某个图像了


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>canvas事件</title>
</head>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
 您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");

 ctx.rect(20,20,50,50); //配置位置和大小，X=20，Y=20 ,width=50,height=50

 //设置的点的位置在，X = 70 ,Y = 70，而绘制的矩形图像范围为 长(x) = 20~70 宽(y) = 20~70,
 //点 处于矩形的范围内（包括边）所以显示
 if (ctx.isPointInPath(70,70))
 {
 ctx.stroke(); //描绘
 };

 ctx.beginPath(); //重新描绘
 ctx.rect(70,70,50,50); //配置位置和大小，X=70，Y=70 ,width=50,height=50

 //设置的点的位置在，X = 120 ,Y = 121，而绘制的矩形图像范围为 长(x) = 70~120 宽(y) = 70~120,
 //点不处于矩形的范围内（包括边）所以不显示
 if (ctx.isPointInPath(120,121))
 {
 ctx.stroke(); //描绘
 };

</script>

</body>
</html>