Question

如何动态把canvas上的坐标传给drawImage，一点canvas上就能显示出来

Answer 1

你可以捕捉到你点击是的位置，在减去cavans距离左上角的距离，就是你在cavans上的位置

追问

能给个demo吗

Answer 2

//id改成你的id就行了
var can=document.getElementById("mycanvas");
var ctx=can.getContext("2d");
var img=new Image()
img.src="http://img2.imgtn.bdimg.com/it/u=3311902994,1296233337&fm=214&gp=0.jpg";
can.onclick=function(){
	//获取点击的x,y坐标
	var x=event.offsetX;
	var y=event.offsetY;
	ctx.clearRect(0,0,can.width,can.height);
	ctx.drawImage(img,x,y);
}

追问

这个我已经实现了，我现在是有多个canvas，是放在左边的，想把左边的canvas放到右边大的canvas上，而且左边的canvas还在，想当于用drawImage显示了一张在大的canvas上，问题是怎么获取左边canvas的id,和右边canvas上的x,y坐标。完整功能是点一下左边的canvas，在右边的canvas上放下。能解决我可以加分

追答

var cansId=null;
//先给左边canvas分别绑定onclick事件
//var cansLeft=document.getElementById("left");

cansLeft.onclick=function(){ //点击获取canvas id
cansId=this.id;
}
//先给右边canvas绑定onclick事件
var cansRight=document.getElementById("right");

cansRight.onclick=function(){
var ctx=cansRight.getContext("2d");
var cansLeft=document.getElementById(cansId);
var x=event.offsetX;
var y=event.offsetY;
ctx.clearRect(0,0,cansRight.width,cansRight.height);
ctx.drawImage(cansLeft, x, y,cansLeft.width,cansLeft.height);
}

如果左边的canvas包含在一个盒子里,只需要把onclick事件绑定到共同的父对象上

父对象.onclick=function(){
src=event.srcElement||event.target;
if(src.nodeName=="CANVAS"){
    cansId=src.id;
}
}

基本功能就这样了,其他细节自己再调节

追问

左边是9个cnavas，是分开的