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

时间：2023-12-05 12:19:38

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>

相关文章