經過Canvas + JS 實現簡易時鐘實戰

時間 2019-11-10

標籤經過 canvas 實現簡易時鐘實戰欄目 JavaScript 简体版

原文原文鏈接

最近經過各類渠道學習了下html5中的canvas元素，爲了練練手就隨手寫了一個簡易的時鐘。時鐘自己不復雜，沒有使用圖片進行美化，下面就與你們分享一下具體的代碼：css

這是最終實現的效果：html

部分的啓發點來自於 http://developer.51cto.com/art/201503/467645.htmhtml5

html代碼：canvas

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Clock</title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .canvas{
            margin-left: 20px;
            margin-top: 20px;


        }
        </style>
    </head>
    <body onload="main()">
     <canvas class = "canvas" id="canvasId" width = '400' height = '400'></canvas> 學習

　　</body>ui

js代碼：this

    var Clockbox = function(obj,width,height){
           this.o = {
               'dates':[],                       //時間
               'obj':obj,                           //canvas對象
               'width':width,                       //canvas寬度
               'height':height,                   //canvas高度
               'obj2d':obj.getContext('2d'),       //2d對象
               'wcolor':'#000000',                   //線條顏色
               'scalewidth':30,                    //刻度長度
               'msradius':(1/30)*Math.PI,           //分秒的弧度
               'hsradius':(1/6)*Math.PI,           //時的弧度
               'hourHandLength' : (width/5),        /*時針長度*/
                'minHandLength':(width/6*1.8),        /*分針長度*/
                'secHandLength':(width/20*8),        /*秒針長度*/
                'fontsize':30                       //數字大小
           }
           var _this = this;
           this.infn();
           setInterval(function(){
              _this.o.obj2d.translate(-_this.o.width/2,-_this.o.height/2);
               _this.o.obj2d.clearRect(0,0,_this.o.width,_this.o.height);
               _this.infn();
           },1000)
       }
       Clockbox.prototype = {
           infn:function(){
               //錶盤
               var obj2d = this.o.obj2d;

               var dates = new Date();
               this.o.dates = [dates.getHours(),dates.getMinutes(),dates.getSeconds()];

               //繪製
               obj2d.beginPath();
               obj2d.arc(this.o.width/2,this.o.height/2,this.o.width/2,0,2*Math.PI,false);
               obj2d.strokeStyle = this.o.wcolor;
               obj2d.stroke();

               //刻度
               this.scalefn(obj2d);
               //時針
               this.hour(obj2d);
               //分針
               this.minute(obj2d);
               //秒針
               this.sec(obj2d);
           },
           //繪製刻度和指針
           scalefn:function(obj2d){
               obj2d.translate(this.o.width/2,this.o.height/2);
               for(var i = 0;i<12;i++){
                   obj2d.moveTo(this.o.width/2-this.o.scalewidth, 0);
                    obj2d.lineTo(this.o.width/2, 0);
                   obj2d.rotate(this.o.hsradius);
               }
               obj2d.font = "bold "+this.o.fontsize+"px impack";
               obj2d.textAlign = "center";
               obj2d.fillStyle = "#ff9000";
               obj2d.fillText("12",0,-((this.o.width/2)-(this.o.scalewidth*2+10)));
               obj2d.fillText("3",((this.o.width/2)-(this.o.scalewidth*2)),this.o.fontsize/3);
               obj2d.fillText("6",0,((this.o.width/2)-(this.o.scalewidth*2)));
               obj2d.fillText("9",-((this.o.width/2)-(this.o.scalewidth*2)),this.o.fontsize/3);
               obj2d.stroke();
               obj2d.restore();
           },
           //時針
           hour:function(obj2d){
                  obj2d.save();
                  obj2d.rotate(this.o.hsradius*Number(this.o.dates[0]));

               obj2d.moveTo(0,0);
               obj2d.lineTo(0,-this.o.hourHandLength);

               obj2d.stroke();
               obj2d.restore();
           },
           //分針
           minute:function(obj2d){
               obj2d.save();
               obj2d.rotate(this.o.msradius*Number(this.o.dates[1]));
               obj2d.beginPath();
               obj2d.moveTo(0,0);
               obj2d.lineTo(0,-this.o.minHandLength);

               obj2d.stroke();
               obj2d.restore();
           },
           //秒針
           sec:function(obj2d){
               obj2d.save();
               obj2d.rotate(this.o.msradius*Number(this.o.dates[2]));
               obj2d.beginPath();
               obj2d.moveTo(0,0);
               obj2d.lineTo(0,-this.o.secHandLength);

               obj2d.stroke();
               obj2d.restore();
           }
       }
   function main(){spa

　　　　 var can = document.getElementById('canvasId');
          var Clock =   new Clockbox(can,400,400);

   }prototype

js代碼詳解：指針

　　　　　　1.首先這裏使用了面向對象的形式

　　　　　　2.這裏爲了方便更改大小，傳入了3個參數 obj，width，height，分別表示canvas元素以及它的寬度和高度，錶盤的半徑是寬的二分之一

　　　　　　3. 由於1小時有60分鐘因此每個分鐘單元格應該有的弧度就是(1/（60/2）)*Math.PI，小時同理

　　　　　　4. 依據如今的時間用 .rotate（）方法對指針作角度控制 12點的時針的弧度就是一個小時的弧度*12

　　　　　　5.最後每秒不斷的清除畫布重構就造成了一個動態的時鐘

遇到的問題：

　　 translate（）在畫完以後 canvas的原點並不在左上角了 ..... 最後在定時器從新設定解決了這個問題

相關文章

相關標籤/搜索

已實測經過

Ext JS 4.2 實戰

紅包項目實戰

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<