Canvas学习日志之六-isPointInPath的作用
- 2016-10-21 07:55:01
- 幻音い
- 5791
温馨提示: 这篇文章于2911天前编写,现在可能不再适用或落后.
恩,早在之前写过关于canvas的教程,由于当时被一些东西卡住了,就没继续写了.
canvas中有一个用来判断是否在某个点,或者说是在某个范围内的方法。叫做isPointInPath(),它使用canvas获取到2d图形后调用。
但是,他在一个图形绘制的时候可以调用,之后将无法使用,也就是说它是临时储存的一个数据.
参数是x轴与y轴。
一般我看到w3c和菜鸟教程那些都是直接给一个直接显示的。例如:
<canvas id="canvas" width="500" height="300" style="border:1px solid #000;"></canvas><script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); ctx.rect(0,0,200,200); if(ctx.isPointInPath(5,5)){ alert("刚才绘制的图形有x=5;y=5"); ctx.fill();//然后绘制 }</script>
这样是当rect绘制完成一个图片后,判断刚才绘制的图像是否处于x=5并且y=5的上面,然后填充.
可能第一次看这个的会懵逼.之后比如说我们点击监听判断点击的这个地方是否处于x=5;y=5的位置上.这样就很明显看出来了。
<canvas id="canvas" width="500" height="300" style="border:1px solid #000;"></canvas><script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); window.onload = function(){ draw();//绘制默认图像 } function draw(x,y){ ctx.rect(0,0,200,200); ctx.fill(); if(x!=null&&y!=null){//判断是否传入值 if(ctx.isPointInPath(x,y)){ alert("点击的位置处于0,0,200,200内"); } } } canvas.onclick = function(e){ ctx.clearRect(0,0,canvas.width,canvas.height); var bbox = canvas.getBoundingClientRect();//获取canvas的边界框 var loc = { x: e.clientX-bbox.left*(canvas.width/bbox.width),//将x与y从窗口坐标中减去 y: e.clientY-bbox.top*(canvas.height/bbox.height) }; //拿到相对位置,重新绘制 draw(loc.x,loc.y); }</script>
因为canvas是不能保存图像的,所以每次点击的时候清空画布,重新调用绘制的方法.然后传入一个x和y坐标,之后填充图像,在进行判断传入的x和y是否在绘制的0,0,200,200位置上面,如果在则弹出alert否则不弹出.
阁下需要登录后才可以查看评论哦~