恩,早在之前写过关于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否则不弹出.

demo地址:

【七空幻音】isPointInPath的用法