如何在canvas中实现鼠标事件？

canvas貌似是一个画布，在里面可以画线和圆，但是在圆上貌似不能实现鼠标事件，不知道该怎么办？
或者是说有什么办法可以用js实现有点有线而且有鼠标事件的功能？大概就像这样子
http://map.baidu.com/subways/index.html?c=beijing
这个是用flash做的，我想用js做个相似点的

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html,body{ margin:0; padding:0;}
</style>
</head><body>
<canvas id="cvs" width="300" height="300" style="border:1px solid #333;">你的浏览器不支持canvas，狗日的IE。</canvas>
<div id="log"></div>
<script>
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext('2d');
if(ctx){
var objs = [];
var CCircle = function(){
this.type = 'circle';
this.x = 0;
this.y = 0;
this.radius = 0;
this.isHover = false;
this.color = '#000';
};
var Draw = function(){
ctx.clearRect(0,0,cvs.width,cvs.height);
for(var i=0;i<objs.length;i++){
if(objs[i].type='circle'){
ctx.beginPath();
ctx.strokeStyle = objs[i].color;
ctx.arc(objs[i].x,objs[i].y,objs[i].radius,0,Math.PI*2,false);
ctx.stroke();
ctx.closePath();
}
}
}

for(var i=0;i<100;i++){
var c = new CCircle();
c.x = (Math.random()*300)|0;
c.y = (Math.random()*300)|0;
c.radius = 10;
c.hover = function(){
this.color = "#f00";
}
c.out = function(){
this.color = "#000";
}
objs.push(c);
}
Draw();
cvs.onmousemove = function(e){
var curr = null;
for(var i=objs.length-1;i>-1;i--){
var c = objs[i];
document.getElementById("log").innerHTML=(e.clientX-c.x)*(e.clientX-c.x)+(e.clientY-c.y)*(e.clientY-c.y) + ' ' +c.radius*c.radius;
if((e.clientX-c.x)*(e.clientX-c.x)+(e.clientY-c.y)*(e.clientY-c.y)<=c.radius*c.radius){
if((!c.isHover) && c.hover){
for(var j=objs.length-1;j>-1;j--){
if(i!=j && objs[j].isHover){
objs[j].isHover = false;
objs[j].out && objs[j].out();
}
}
c.hover();
c.isHover = true;
Draw();
}
return;
}
}
}
}
</script>
</body>
</html>
现在赚个分都得累死头驴。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html,body{ margin:0; padding:0;}
</style>
</head><body>
<canvas id="cvs" width="300" height="300" style="border:1px solid #333;">你的浏览器不支持canvas，狗日的IE。</canvas>
<div id="log"></div>
<script>
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext('2d');
if(ctx){
var objs = [];
var CCircle = function(){
this.type = 'circle';
this.x = 0;
this.y = 0;
this.radius = 0;
this.isHover = false;
this.color = '#000';
};
var Draw = function(){
ctx.clearRect(0,0,cvs.width,cvs.height);
for(var i=0;i<objs.length;i++){
if(objs[i].type='circle'){
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = objs[i].color;
ctx.arc(objs[i].x,objs[i].y,objs[i].radius,0,Math.PI*2,false);
ctx.stroke();
ctx.closePath();
}
}
}// end function

for(var i=0;i<100;i++){
var c = new CCircle();
c.x = (Math.random()*300)|0;
c.y = (Math.random()*300)|0;
c.radius = 10;
c.hover = function(){
this.color = "#f00";
Draw();
}
c.out = function(){
this.color = "#000";
Draw();
}
objs.push(c);
}// end for
Draw();
cvs.onmousemove = function(e){
var hasHover = false;
for(var i=objs.length-1;i>-1;i--){
var c = objs[i];
if(((e.clientX-c.x)*(e.clientX-c.x)+(e.clientY-c.y)*(e.clientY-c.y)<=c.radius*c.radius) && (!hasHover)){
c.isHover = true;
hasHover = true;
c.hover && c.hover();
}else{
if(c.isHover){
c.isHover = false;
c.out && c.out();
}
}//end if
}// end for
}// end function
}
</script>
</body>
</html>修正bug...
哥，canvas不支持内部对象处理事件，要么使用别人编写好的框架，要么自己写事件处理。。
我这个是自己写的处理事件...
你可以自己试着改成点击的...
20分你还是别让我累死吧。