求助！！html5中的canvas的问题。求指点。。。

问题描述：我用canvas定义了一个图层。然后再这个上面绘制了一个圆，怎样实现鼠标经过这个圆变
色，点击这个圆变色的行为啊初学html5.求高手指点。。
代码如下：
<!DOCTYPE html> 
<html> 
<head> 
<title>text</title> 
</head> 
<body>
<canvas id="mycircle" width="400" height="300">
</canvas> 
<script type="text/javascript"> 
function drawCircle(){ 
var canvas = document.getElementById("mycircle"); 
var ctx = 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.   

    给个思路：     1、取得鼠标坐标（注意，是相对于canvas容器的坐标）     2、判断是否在圆上     3、激发事件，使圆变色
    对于初学者来说  容易出错的地方在第一点上，注意取得了 鼠标的 clientX和clienY之后还要减去容器的偏移量和滚动条的宽度  其他的就没什么难的了
      

  2.   


    <!DOCTYPE html>  
    <head>  
    <title>text</title>  
    <style>
    html,body{ margin:0; padding:0;}
    </style>
    </head>  
    <body>
    <canvas id="mycircle" width="400" height="300" style="border:1px solid #333; position:absolute; left:0; top:0;"></canvas>  
    <script type="text/javascript">  
    var Circle = 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;
    }
    var mouse = {x:-1000,y:-1000};
    var circle = new Circle();
    var ctx = document.getElementById("mycircle").getContext("2d");
    function loop(){
    circle.x += circle.vx;
    circle.y += circle.vy;
    if(circle.x>ctx.canvas.width-circle.radius){
    circle.x = ctx.canvas.width-circle.radius
    circle.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.radius
    circle.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本身不支持内部绘制图形的事件响应，只能自己编写事件监测代码。
    原则上，做开发的话，还是用框架比较好一些。