Html5 Canva中绘制的元素添加鼠标事件实例教程
发布时间：01/15 来源： 浏览：
关键词：
如果我们要在Html5 Canva中绘制的元素添加鼠标事件，本文提供两个实例，一个是使用使用jTopo，另外一个实例是使用原生javasrcitp实现的。
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
使用Html5的时候，在Canvas上绘制的东西是不能相应鼠标事件的，但是使用jTopo添加事件非常简单，效果如下：
代码示例：
var node = new JTopo.Node("Hello");
node.setLocation(409, 269);
node.mousedown(function(event){
if(event.button == 2){
node.text = '按下右键';
}else if(event.button == 1){
node.text = '按下中键';
}else if(event.button == 0){
node.text = '按下左键';
}
});
node.mouseup(function(event){
if(event.button == 2){
node.text = '松开右键';
}else if(event.button == 1){
node.text = '松开中键';
}else if(event.button == 0){
node.text = '松开左键';
}
});
node.click(function(event){
console.log("单击");
});
node.dbclick(function(event){
console.log("双击");
});
node.mousedrag(function(event){
console.log("拖拽");
});
node.mouseover(function(event){
console.log("mouseover");
});
node.mousemove(function(event){
console.log("mousemove");
});
node.mouseout(function(event){
console.log("mouseout");
});
实例二
问：用HTML5的canvas画的一个图，如何添加鼠标事件（如：移入，点击），感谢各位的指点！
回答一：
面向对象就可以
一个是你找找对象化的canvas框架 比如canvasjs
一个是你自己写对象结构
简单说你canvas里面所有画的元素都是对象 比如那个 圆圈 比如那个线条
每个对象都要 实现 鼠标事件 mouseon 等等 每个对象要知道自己的坐标和大小（矩形大小）
但是怎么触发？ 在canvas上绑定所有鼠标事件 然后 检查坐标看那个对象被触及了 然后调用该对象 相应的鼠标事件
回答二：
不是给图形添加鼠标事件，而是在鼠标事件中判断鼠标下是哪个图形。如
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/jqplot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript">
var list=[];
var currentC;
var _e={};
var cricle = function(x,y,r){
this.x=x;
this.y=y;
this.r=r;
this.isCurrent=false;
this.drawC=function(ctx,x,y){
ctx.save();
ctx.beginPath();
ctx.moveTo(this.x,this.y-this.r);
ctx.arc(this.x,this.y,this.r,2*Math.PI,0,true);
if ((x && y && ctx.isPointInPath(x, y) && !currentC )||this.isCurrent) {
ctx.fillStyle = '#ff0000';
currentC=this;
this.isCurrent=true;
}else{
ctx.fillStyle = '#999999';
}
ctx.fill();
}
}
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
for(var i=0;i<10;i++){
var c=new cricle(20*i,20*i,5*i);
c.drawC(ctx);
list.push(c);
}
}
}
function reDraw(e){
e=e||event;
var canvas = document.getElementById('tutorial');
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
canvas.width = canvas.width;
if (canvas.getContext){
var ctx = canvas.getContext('2d');
for(var i=0;i<list.length;i++){
var c=list[i];
c.drawC(ctx,x,y);
}
}
}
function show(e){
e=e||event;
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
if(currentC){
currentC.x=parseInt(x+(x-currentC.x)/5);
currentC.y=parseInt(y+(y-currentC.y)/5);
}
_e=e;
}
window.onload=function(){
var canvas = document.getElementById('tutorial');
draw();
canvas.onmousedown=function(e){
e=e||event;
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
if(currentC)
currentC.isCurrent=false;
currentC=null;
reDraw(e);
_e=e;
var showTimer=setInterval(function(e){
reDraw(e);
},10,_e);
canvas.onmousemove=show;
document.onmouseup=function(){
if(currentC)
currentC.isCurrent=false;
currentC=null;
canvas.onmousemove=null;
clearInterval(showTimer);
}
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body style="background:#eeeeee;">
<canvas id="tutorial" width="1000" height="550" style="z-index:100;display:block;position:absolute;"></canvas>
</body>
</html>
