问题描述
问题描述：我用canvas定义了一个图层。然后再这个上面绘制了一个圆，怎样实现鼠标经过这个圆变色，点击这个圆变色的行为啊。。。初学html5.。。。求高手指点。。代码如下：<!DOCTYPEhtml><html><head><title>text</title></head><body><canvasid="mycircle"width="400"height="300"></canvas><scripttype="text/javascript">functiondrawCircle(){varcanvas=document.getElementById("mycircle");varctx=canvas.getContext("2d");ctx.fillStyle='#ff0000';ctx.beginPath();ctx.moveTo(200,150);ctx.arc(200,150,150,0,Math.PI*2,false);ctx.fill();}drawCircle();</script></body></html>
解决方案
解决方案二：
给个思路：1、取得鼠标坐标（注意，是相对于canvas容器的坐标）2、判断是否在圆上3、激发事件，使圆变色对于初学者来说容易出错的地方在第一点上，注意取得了鼠标的clientX和clienY之后还要减去容器的偏移量和滚动条的宽度其他的就没什么难的了
解决方案三：
<!DOCTYPEhtml><head><title>text</title><style>html,body{margin:0;padding:0;}</style></head><body><canvasid="mycircle"width="400"height="300"style="border:1pxsolid#333;position:absolute;left:0;top:0;"></canvas><scripttype="text/javascript">varCircle=function(){this.x=0;this.y=0;this.radius=50;this.z=0;this.vx=5;this.vy=5;this.color='#000000';}Circle.prototype.hitTestPoint=function(point){return(point.x-this.x)*(point.x-this.x)+(point.y-this.y)*(point.y-this.y)<this.radius*this.radius;}varmouse={x:-1000,y:-1000};varcircle=newCircle();varctx=document.getElementById("mycircle").getContext("2d");functionloop(){circle.x+=circle.vx;circle.y+=circle.vy;if(circle.x>ctx.canvas.width-circle.radius){circle.x=ctx.canvas.width-circle.radiuscircle.vx*=-1;}if(circle.x<circle.radius){circle.x=circle.radius;circle.vx*=-1;}if(circle.y>ctx.canvas.height-circle.radius){circle.y=ctx.canvas.height-circle.radiuscircle.vy*=-1;}if(circle.y<circle.radius){circle.y=circle.radius;circle.vy*=-1;}circle.color=circle.hitTestPoint(mouse)?'#ff0000':'#000000';ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);ctx.fillStyle=circle.color;ctx.beginPath();ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2,false);ctx.fill();}setInterval(loop,23);ctx.canvas.onmousemove=function(e){mouse.x=e.clientX;mouse.y=e.clientY;};ctx.canvas.onmouseout=function(){mouse.x=-1000;mouse.y=-1000;}</script></body></html>
canvas本身不支持内部绘制图形的事件响应，只能自己编写事件监测代码。原则上，做开发的话，还是用框架比较好一些。