canvas的實例--時鐘動畫

平常在公司不忙的時候，就喜歡寫一些小效果什麼的，一來複習複習，二來可以發現一些問題。

 

今天在群組裡看別人發了一手錶的圖片，臥槽...妥妥的工作好多年的節奏，後來想想還是做好自己的事情算了，想那多幹啥，就畫了一個手錶....

 

#直接上程式碼：

 

#html

##################### # ######

nbsp;HTML><meta><title>canvas clock</title><script></script><canvas></canvas><script>clock.canvasClock();</script>

######js######

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);        //设置圆的颜色渐变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);                              //清空给定矩形内的指定像素//画圆            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####### ######本來準備封裝一下的，要下班時來任務了，飛了. ....###### ###

以上是canvas的實例--時鐘動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！