如何使用canvas實(shí)現(xiàn)時鐘動畫

發(fā)布時間：2020-07-20 10:53:54 來源：億速云閱讀：136 作者：Leah 欄目：web開發(fā)

本篇文章為大家展示了如何使用canvas實(shí)現(xiàn)時鐘動畫，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

直接上代碼：

html

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>canvas clock</title><script type="text/javascript" src="percent.js?1.1.10"></script></head><body><canvas id="canvas" width="600" height="600"></canvas></body></html><script type="text/javascript">clock.canvasClock();</script>

var clock=(function(){function _canvasClock(){var cvs=document.getElementById('canvas');var ctx=cvs.getContext('2d');var PI=Math.PI;var lineWidth=5;                                             //線寬var gradient=ctx.createLinearGradient(10,10,580,580);        //設(shè)置圓的顏色漸變gradient.addColorStop("0","#a251ff");
        gradient.addColorStop(1,"#2ec2ff");
        ctx.fillStyle = '#ef6670';
        ctx.fillRect(0,0,600,600);var drawBig=function(){var time=new Date();var second=time.getSeconds();                            //秒var Minute=time.getMinutes();                            //分var hour=time.getHours();                                //時//hour=hour+Minute/60;hour=hour>12?hour-12:hour;                               //表盤只有12小時            
            ctx.clearRect(0,0,600,600);                              //清空給定矩形內(nèi)的指定像素//畫圓            ctx.beginPath();
            ctx.lineWidth=lineWidth;
            ctx.strokeStyle=gradient;
            ctx.arc(300,300,290,0, PI * 2,false);
            ctx.stroke();
            ctx.closePath();
            
            ctx.beginPath();
            ctx.lineWidth=lineWidth;
            ctx.strokeStyle=gradient;
            ctx.arc(300,300,10,0, PI * 2,false);
            ctx.stroke();
            ctx.closePath();            for(var i=0;i<60;i++){  
                ctx.save();                        　//保存之前畫布狀態(tài)   ctx.lineWidth=4;                　　 //設(shè)置分針的粗細(xì)                 ctx.strokeStyle="#616161";          //設(shè)置分針的顏色                 ctx.translate(300,300);             //畫布圓點(diǎn)設(shè)置        ctx.rotate(i*PI/30);                //角度*Math.PI/180=弧度,設(shè)置旋轉(zhuǎn)角度 
                ctx.beginPath();                    //開始一條路徑ctx.moveTo(0,-287);                 //相對畫布圓點(diǎn)路徑的起點(diǎn)ctx.lineTo(0,-283);                 //相對畫布圓點(diǎn)路徑的終點(diǎn)ctx.closePath();                    //結(jié)束一條路徑ctx.stroke();                       //實(shí)際地繪制出通過 moveTo()和 lineTo()方法定義的路徑ctx.restore();                      //restore() 方法將繪圖狀態(tài)置為保存值            }            for(var i=0;i<12;i++){
                ctx.save();
                ctx.lineWidth=4;
                ctx.strokeStyle=gradient;    
                ctx.translate(300,300);   
                ctx.rotate(i*PI/6);                ctx.beginPath();  
                ctx.moveTo(0,-287);
                ctx.lineTo(0,-278); 
                ctx.closePath();  
                ctx.stroke();  
                ctx.restore();  
            }            //時針              ctx.save();           
            ctx.lineWidth=3;                  
            ctx.strokeStyle="#0f0f0f";                
            ctx.translate(300,300);
            ctx.rotate(hour*PI/6+second*PI/108000);  
            ctx.beginPath();  
            ctx.moveTo(0,-238);
            ctx.lineTo(0,10);  
            ctx.closePath();  
            ctx.stroke();  
            ctx.restore();  
            //分針              ctx.save();  
            ctx.lineWidth=3;  
            ctx.strokeStyle="#010101";  
            ctx.translate(300,300);  
            ctx.rotate(Minute*PI/30+second*PI/1800);  
            ctx.beginPath();  
            ctx.moveTo(0,-258);  
            ctx.lineTo(0,15);  
            ctx.closePath();  
            ctx.stroke();
            ctx.restore();  
          
              //秒針                          ctx.save();  
            ctx.strokeStyle="#ff100d";  
            ctx.lineWidth=3;  
            ctx.translate(300,300);               
            ctx.rotate(second*PI/30);               
            ctx.beginPath();
            ctx.moveTo(0,-278);  
            ctx.lineTo(0,20);  
            ctx.closePath();  
            ctx.stroke();  
            
            ctx.beginPath();                        //時針分針秒針交點(diǎn)  ctx.arc(0,0,6,0,2*PI,false);
            ctx.closePath();                  
            ctx.fillStyle="#fff";
            ctx.fill();               
            ctx.stroke();     
            ctx.restore();  
            requestAnimationFrame(drawBig);            //實(shí)現(xiàn)動畫修改的接口        };
        drawBig();
        setInterval(drawBig,1000);                    //每1s重繪一次    };return{
        canvasClock:_canvasClock,
    }
}())

上述內(nèi)容就是如何使用canvas實(shí)現(xiàn)時鐘動畫，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

如何使用canvas實(shí)現(xiàn)時鐘動畫

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽