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

最新推荐文章于 2024-08-10 05:02:47 发布

lily2016n

最新推荐文章于 2024-08-10 05:02:47 发布

阅读量6.4k

点赞数 3

分类专栏： js 文章标签： html5 canvas

本文链接：https://blog.csdn.net/lily2016n/article/details/77897434

版权

js 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

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;
      }