javascript - 一个canvas里，分别为其他元素绑定事件

问题描述

问 题

刚学canvas，搜了一些教程，还是不太明白怎么在一个canvas里怎么给img1.jpg,img2.jpg分别添加事件？
如下简单例子：

    var canvas=doc.querySelector('#canvas_wrapper');
    var cvs=canvas.getContext('2d');
    var imgArr=['img1.jpg','img2.jpg']
    var images=[];
    var img=null;
    for(var i=0,len=imgArr.length;i<len;i++){
        img=new Image();
        img.src=imgArr[i];
        images.push(img);
    };
    img.onload=function(){
        cvs.drawImage(images[0],0,0,200,100); //给这个添加事件
        cvs.drawImage(images[1],0,100,200,100); //给这个添加事件
    };

望指点，谢谢了

解决方案

楼主你说到点子上了，如果图片多的话怎么办？如果不是图片是个矩形，圆形，扇形， 甚至是不规则图形怎么办？？？

请走进今天的走进科学！

就是把要绘制的元素抽象成对象啦～

比如 function image() {}, function rect() {}...

而这些方法在调用的时候都会储存进一个全局的数组中，是你绘制的所有元素的集合， 集合中包含各自的位置信息， 判断点是否在区域中的信息 ， 以及一切你自定义的信息。

遍历这个集合， 依次绘制， 判断点是否在某个对象上， 调用这个对象的isPointerInner方法(对象中的判断点是否在区域内的方法)就可以了。

有点懵比的话看我封装好的一个库， 思路就是上边的思路啦～

https://github.com/PengJiyuan...

用这个库实现的图表

https://github.com/PengJiyuan...

这篇关于javascript - 一个canvas里，分别为其他元素绑定事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！