首頁 > web前端 > H5教程 > 主體

canvas的實例--時鐘動畫

PHP中文网
發布: 2017-06-20 13:43:20
原創
1386 人瀏覽過

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

 

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

 

#直接上程式碼:

 

#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>
登入後複製
######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<60;i++){  
                ctx.save();                         //保存之前画布状态   ctx.lineWidth=4;                   //设置分针的粗细                 ctx.strokeStyle="#616161";          //设置分针的颜色                 ctx.translate(300,300);             //画布圆点设置        ctx.rotate(i*PI/30);                //角度*Math.PI/180=弧度,设置旋转角度 
                ctx.beginPath();                    //开始一条路径ctx.moveTo(0,-287);                 //相对画布圆点路径的起点ctx.lineTo(0,-283);                 //相对画布圆点路径的终点ctx.closePath();                    //结束一条路径ctx.stroke();                       //实际地绘制出通过 moveTo()和 lineTo()方法定义的路径ctx.restore();                      //restore() 方法将绘图状态置为保存值            }            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();                        //时针分针秒针交点  ctx.arc(0,0,6,0,2*PI,false);
            ctx.closePath();                  
            ctx.fillStyle="#fff";
            ctx.fill();               
            ctx.stroke();     
            ctx.restore();  
            requestAnimationFrame(drawBig);            //实现动画修改的接口        };
        drawBig();
        setInterval(drawBig,1000);                    //每1s重绘一次    };return{
        canvasClock:_canvasClock,
    }
}())
登入後複製
####### ######本來準備封裝一下的,要下班時來任務了,飛了. ....###### ###

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!