1949啦网--小小 - canvas中交互isPointInPath()方法

2018年10月28日 03:24:36

canvas中交互isPointInPath()方法

canvas有一个交互性很强的API——isPointInPath()，isPointInPath(x,y)方法用来检测指定点是在路径内还是在路径外。如果在当前路径中，则返回true，否则返回false

下面是一个canvas交互的实例，点击蓝色的小圆，可变成红色

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  	</head>  	<body>  		<canvas id="drawing" style="border:1px solid black">      <p>The canvas element is not supported!</p>  </canvas>  <script>  var drawing = document.getElementById('drawing');  if(drawing.getContext){      var cxt = drawing.getContext('2d');      var H=150,W=300;      var balls = [];      var NUM = 5;      for(var i = 0; i < NUM; i++){          var tempBall = {              x:Math.floor(Math.random()*W),              y:Math.floor(Math.random()*H),              r:Math.floor(Math.random()*40+20)          }          balls[i] = tempBall;          draw();          drawing.addEventListener('click',fnDetect);      }      function draw(){          for(var i = 0; i < balls.length; i++){              cxt.beginPath();              cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2);              cxt.fillStyle = '#058';              cxt.fill();          }      }      function fnDetect(e){          e = e || event;          var x = e.clientX - drawing.getBoundingClientRect().left;          var y = e.clientY - drawing.getBoundingClientRect().top;          for(var i = 0; i < balls.length; i++){              cxt.beginPath();              cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2);              if(cxt.isPointInPath(x,y)){                  cxt.fillStyle = 'red';                  cxt.fill();              }          }      }  }   </script>  	</body>  </html>

原文链接：https://www.qiquanji.com/post/7887.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知