HTML5 Canvas绘制多个图形时,点击图形实现页面跳转

1、首先要做的,是给Canvas元素绑定事件,比如Canvas内部某个图形要绑定点击事件,就需要通过Canvas元素代理该事件:

cvs = document.getElementById('mycanvas');
context = canvas.getContext('2d');
cvs.addEventListener('click', function(e){
  p = getEventPosition(e);
  reDraw(p,context); // 
  console.log(p); //在控制台可以打印出来点击的位置
}, false);

2、接下来需要判断事件对象发生的位置,事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。但是这个属性Opera不支持,Safari也打算移除,所以要做一些兼容写法:

 function getEventPosition(ev){
        var x, y;
        if (ev.layerX || ev.layerX == 0) {
          x = ev.layerX;
          y = ev.layerY;
        } else if (ev.offsetX || ev.offsetX == 0) { // Opera
          x = ev.offsetX;
          y = ev.offsetY;
        }
        return {x: x, y: y};
      }//注:使用上面这个函数,需要给Canvas元素的position设为absolute。

现在有了事件对象的坐标位置,下面就要判断Canvas里的图形,有哪些覆盖了这个坐标。

3、重绘,为了实现循环重绘,所以就要将图形的基本参数事先保存下来:
当点击事件发生时,重绘所有图形,每绘制一个就使用isPointInPath方法,判断事件坐标是否在该图形覆盖范围内。

 //重绘
      var arr = [
                {"x":35,"y":236,"width":64,"height":64},
                {"x":175,"y":54,"width":48,"height":47},
                {"x":311,"y":270,"width":76,"height":77},
                {"x":35,"y":400,"width":85,"height":85},
                {"x":230,"y":440,"width":100,"height":100},
                // {x:150,y:220,width:98.15,height:92.65}
                ] 
        //把原区域声明为数组存起来
      var hrefo= ['indexa.html','demo.html','canvas.html','https://www.baidu.com/','http://jquery.cuishifeng.cn/parent.html'] //点击对应区域跳转到相应的页面
      var $my_canvas=$("#myCanvas");
      var my_canvas=$my_canvas[0];
      var context=my_canvas.getContext("2d");
      var cvs = $my_canvas 
      function reDraw(p){        
        var who = [];
        context.clearRect(0, 0, cvs.width, cvs.height);
        arr.forEach(function(v, i){
          context.beginPath();
          context.rect(v.x, v.y, v.width, v.height);
         //context.stroke();//绘制路径
         //context.strokeStyle="rgba(0,0,0,0,0.5)"     
           if(p && context.isPointInPath(p.x, p.y)){
             alert('第'+i+'个')
             window.location.href = hee[i] //跳转到相应的页面根据把原区域声明为数组存起来
             //如果传入了事件坐标,就用isPointInPath判断一下
             //如果当前环境覆盖了该坐标,就将当前环境的index值放到数组里
          who.push(i);
           }else{
           }
        });
        //根据数组中的index值,可以到arr数组中找到相应的元素。
        return who;
      }

点击事件发生时reDraw方法会执行一次重绘,并在重绘过程中检查每一个图形是否覆盖了事件坐标,如果判断为真,则视为点击了该图形,并将该图形的index值放入数组,最后将数组作为reDraw方法的返回值

参考网址http://www.xyhtml5.com/html5-canvas-event-handler.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值