让你马上明白isPointInPath 属性—— canvas的 isPointInPath 属性测试案例

最新推荐文章于 2023-06-25 12:03:16 发布

Allan_L

最新推荐文章于 2023-06-25 12:03:16 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： canvas 前端

本文链接：https://blog.csdn.net/Allan_L/article/details/80941212

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

 
  <!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 
  > 
 
  //注意：canvas不支持变量存储，所以，isPointInPath只对当前路径有效!  
 
  var 
  c= 
  document. 
  getElementById( 
  "myCanvas"); 
 
  var 
  ctx= 
  c. 
  getContext( 
  "2d"); 
 
  ctx. 
  strokeStyle= 
  "red"; 
 
  ctx. 
  rect( 
  20, 
  20, 
  50, 
  50); 
  //配置位置和大小，X=20，Y=20 ,width=50,height=50 
 
  //矩形绘制范围计算： ctx左上角坐标为（0, 0); x,y分别为20，所以，长宽的起始范围为20，终止范围为：坐标距离 + 矩形的长宽 ，20+50 = 70 
 
  //设置的点的位置在，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 
 
  //此时， 当前路径为：ctx.rect(70,70, 50, 50);同理 
 
  //设置的点的位置在，X = 120 ,Y = 121，而绘制的矩形图像范围为 长(x) = 70~120 宽(y) = 70~120, 
 
  //点不处于矩形的范围内（包括边）所以不显示 
 
  if ( 
  ctx. 
  isPointInPath( 
  120, 
  120)) 
 
   { 
 
  ctx. 
  stroke(); 
  //描绘 
 
   }; 
 
  < 
  / 
  script 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >