刚学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); //给这个添加事件
};
望指点,谢谢了
var canvas=doc.querySelector('#canvas_wrapper');
var cvs=canvas.getContext('2d');
var imgArr=['img1.jpg','img2.jpg'] //图片地址
var images=[]; //给将要创建的image对象建个容器
var img=null; //声明img
for(var i=0,len=imgArr.length;i<len;i++){
img=new Image(); //创建image对象
img.src=imgArr[i]; //给image对象分配地址
images.push(img); //把分配完地址的image对象放到容器里
};
img.onload=function(){ //在image加载时触发方法把容器里的image对象放到canvas中
cvs.drawImage(images[0],0,0,200,100); //给这个添加事件
cvs.drawImage(images[1],0,100,200,100); //给这个添加事件
};
已经解决了,古老的方法,判断坐标位置,不过要是图片很多的话,估计就麻烦了,不知道有没有其他方法=。=!
canvas.addEventListener('click',function(ev){
var pos=getPosition(ev);
if(pos.x>=0&&pos.x<=200){
if(pos.y>=0&&pos.y<=100){
console.log('在第一张图上')
}else{
console.log('在第二张图上');
}
}
},false);
//获取点击时的坐标
function getPosition(ev){
var x, y;
if (ev.layerX || ev.layerX == 0){
x = ev.layerX;
y = ev.layerY;
}else if (ev.offsetX || ev.offsetX == 0){
x = ev.offsetX;
y = ev.offsetY;
}
return {x: x,y: y};
}