html5 Canvas绘制时钟以及绘制运动的圆

1、绘制时钟

<!-- js代码 -->
<script type="text/javascript">
window.onload=function(){
    var oC1=document.getElementById('c1')
    var oGC=oC1.getContext('2d');

    function toDraw(){
        var x=200;
        var y=200;
        var r=150;

        oGC.clearRect(0,0,oC1.width,oC1.height);

        var iDate=new Date();
        var iHou=iDate.getHours();
        var iMin=iDate.getMinutes();
        var iSce=iDate.getSeconds();

        var oHoursValue = (-90 + iHou*30 + iMin/2) * Math.PI/180;
        var oMinValue = (-90 + iMin*6) * Math.PI/180;
        var oSenValue = (-90 + iSce*6) * Math.PI/180;

        oGC.beginPath();

        for(var i=0;i<60;i++){
            oGC.moveTo(x,y);
            oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
            }

            oGC.closePath();

            oGC.stroke();

            oGC.fillStyle='#fff';

         oGC.beginPath();

        oGC.moveTo(x,y);

        oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);

        oGC.closePath();

        oGC.fill();     

        oGC.lineWidth=3;

        oGC.beginPath();

        for(var i=0;i<12;i++){

        oGC.moveTo(x,y);

        oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
        }

        oGC.closePath();

        oGC.stroke();

        oGC.fillStyle = '#fff';

        oGC.beginPath();

        oGC.moveTo(x,y);

        oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);

        oGC.closePath();

        oGC.fill();

        oGC.lineWidth = 5;
        oGC.beginPath();
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*9/20,oHoursValue,oHoursValue,false);

        oGC.closePath();
        oGC.stroke();   

     oGC.lineWidth = 3;
        oGC.beginPath();
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*13/20,oMinValue,oMinValue,false);

        oGC.closePath();
        oGC.stroke();   

        oGC.lineWidth = 1;
        oGC.beginPath();
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*18/20,oSenValue,oSenValue,false);

        oGC.closePath();
        oGC.stroke();
        }
        setInterval(toDraw,1000);
        toDraw();
    }
</script>

<canvas id="c1" width="400" height="400"></canvas>

2、绘制运动的圆

 <!-- js代码 -->
    <script>
        window.onload=function(){
            var oC=document.getElementById('c1');
            var oGC=oC.getContext('2d');
            var setArr=[];

            setInterval(function(){//进行运动操作

                oGC.clearRect(0,0,oC.width,oC.height);

                for(var i=0;i<setArr.length;i++){
                    setArr[i].r+=1;//半径每次增大1
                    setArr[i].c4-=0.01;

                    if(setArr[i].c4<=0){//删除背景为透明的，避免元素过大
                       setArr.splice(i,1);
                    }
                }
                for(var i=0;i<setArr.length;i++){
                    oGC.beginPath();
                    oGC.fillStyle='rgba('+setArr[i].c1+','+setArr[i].c2+','+setArr[i].c3+','+setArr[i].c4+')';
                    oGC.moveTo(setArr[i].x,setArr[i].y);
                    oGC.arc(setArr[i].x,setArr[i].y,setArr[i].r,0,360*Math.PI/180,false);
                    oGC.closePath();
                    oGC.fill();
                }

            },1000/60);

            setInterval(function(){//添加数据

                var x=Math.floor(Math.random()*oC.width);//随机产生圆的x值
                var y=Math.floor(Math.random()*oC.height);//随机产生圆的y值
                var r=4;//圆的半径
                //随机产生圆的颜色rgb
                var c1=Math.floor(Math.random()*255);
                var c2=Math.floor(Math.random()*255);
                var c3=Math.floor(Math.random()*255);
                var c4=1;//设置透明度

                setArr.push({
                    x : x,
                    y : y,
                    r : r,
                    c1 : c1,
                    c2 : c2,
                    c3 : c3,
                    c4 : c4
                });

            },500);//往数组中放元素
        }
    </script>

<canvas id="c1" width="400" height="400"></canvas>