HTML5 Canvas中 瞎鼓捣

自己准备些一个类似于守株待兔的一个玩意
具体说来 就是 在canvas 的画布中 鼠标点击后画上一个圆形 然后就有随机的在画布上面出现小球来 如果随机圆和绘制圆的圆心距=2*R 则撞到了。
其中的问题有：
① 怎么获取鼠标点击的坐标点
解决办法 ：用一个

包含canvas画布 而且将其宽度和高度设为一致的 同时调用div 的点击事件就可以获取到 此时canvas 中的坐标了 。

<div  onclick="draw_location(event)" style="float:left;width:600;height:900;border:1px solid #c3c3c3">
<!--onmousemove="draw_location(event)" 也可以动态读取鼠标到哪里就显示器坐标 -->
        <canvas id="canvas_Main" width="600" height="900"></canvas>
</div>
<!-- js当中的代码就非常的简单了 这里就不一一的写 <script>标签了 -->
function draw_location(e)
        {
            faixed_X=e.clientX;
            faixed_Y=e.clientY;
            if(number>0)
            {
                ClearCanvas();
                 if(confirm('确定绘制在这里吗？'))
                 {
                    draw_panl(faixed_X,faixed_Y);//此处为调用画圆方法
                    feel_ball();
                 }          
                number--;                   
            }else
            {
                alert("所选次数已用完 请点击下面的按钮");

            }   
            btnHide_Show(number);
        }

② 怎么求圆心距

解决方法：
看看示意图
js当中有一个开方的高阶函数： Math.sqrt();

既然图中涉及到平方 那就先来一个平方的方法

function  squre(num)
        {
            return num*num;
        }

圆心距来了：

//计算圆心距
        //x  y为活动圆心坐标 
        //半径已设定为 15  如需要要更改  以后加上
        function  cylinder_spacing(x,y,r)
        {
         var  result;
         var  temp=squre(faixed_X-x)+squre(faixed_Y-y)
         result=Math.sqrt(temp);
         if(result<=2*r)
         {
            goldnum=goldnum+100;
            //金额加100
            document.getElementById("xycoordinates").innerText=goldnum;
         }else
         {
            //提示没有中奖         
         }      
        }   

③ 画圆

解决办法：这个十分的简单 W3C教程上面有

//画圆
        function draw_panl()
        {       
             RandomCoords();//随机获取坐标的方法 大家不用在意
            var c=document.getElementById("canvas_Main");
            var cxt=c.getContext("2d"); 
            cxt.fillStyle=Get_Color(); //此处是随机获取颜色 那样日子才多姿多彩
            //可以加上 阴影
            cxt.shadowOffsetX = 5; // 阴影Y轴偏移
            cxt.shadowOffsetY = 3; // 阴影X轴偏移
            cxt.shadowBlur = 5; // 模糊尺寸
            //----其实加上阴影之后 渲染时 更加费资源哟 手机更热，风扇更带劲的转悠-------------
            cxt.shadowColor =Get_Color(); // 颜色
            cxt.beginPath();
            cxt.arc(rand_X,rand_Y,25,0,Math.PI*2,true);
            cxt.closePath();
            cxt.fill(); 
        }
//获取随机颜色
        function Get_Color()
        {
            var  color='#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);   
            return color;
        }

④ 随机圆
解决办法
因为是随机的 而且还要时时的更新位置 当然就要用到定时器 setInterval( function(){}①,time②)
①=》function(){ 代码片 } || 别处定义好的方法 name
②=》毫秒
定时器是一个全局变量 一处声明 处处就可以调用了

var panl=setInterval(draw_panl,300)// panl 为当前计时器的名字
//如果你要暂停这个计时器就要用到 clearInterval(③)
③=》计时器名字
//*****-- 一个页面中必须要给计时器命名字 当你停止之后又开始 时  如果不指定名字 则会导致计时器的时间嵌套出错 
间隔时间 越来越小---****
//暂停计时器
clearInterval(panl);
//开始计时器
panl=setInterval(functionName,time);

本人不才 在页面中去清除前一秒绘制的随机圆时 用的是用屏幕颜色去填充圆形 （这样很费效率）
其中有一个需要注意的问题是 你之前绘制这个圆形的时候 你给的R 是25 在你准备用白色填充它的时候
如果也给25 那么恭喜你 会有一些很细很细的圆形在canvas 的画布上 当R 设定为25.5时 则没有问题
这个是什么原因？ 我嘴笨，具体你们可以听下 传智博客的canvas 教学里面的