DIV CSS 佈局教程網

設為首頁加入收藏

DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> 通過Canvas + JS 實現簡易時鐘實戰

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

編輯：HTML5教程

最近通過各種渠道學習了下html5中的canvas元素，為了練練手就隨手寫了一個簡易的時鐘。時鐘本身不復雜，沒有使用圖片進行美化，下面就與大家分享一下具體的代碼：

這是最終實現的效果：

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

html代碼：

<!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>

js代碼：

    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(){

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

   }

js代碼詳解：

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

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

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

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

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

遇到的問題：

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

上一頁:HTML5 Web存儲的localStorage和sessionStorage的使用方法
下一頁:基於HTML5的多張圖片上傳

12個不為大家熟知的HTML5設計小技巧: 12個不為大家熟知的HTML5設計小技巧，內容如下1、交互上，慎用向右滑動的操作方式。如：刮刮樂塗抹
HTML5的表單元素簡介: HTML5 的新的表單元素：HTML5 擁有若干涉及表單的元素和屬性。本章介紹以下新的表單元素：
聊聊打造HTML 5動感影集的愛恨情仇: 　　動感影集是QQ空間新功能，可以將靜態的圖片輕松轉變為動態的視頻集，且載體是HTML5

相關文章

HTML入門知識 HTML5教程關於HTML HTML和Xhtml HTML5特效代碼 HTML5詳解

小編推薦

移動開發中HTML5能否替代本地程序？ html5彈跳球示例代碼京東H5廣告精選合集 HTML5應用程序緩存Application Cache詳解 DNF浴火新生H5項目總結實現自己網站的圖片假水印功能關於老式浏覽器兼容HTML5和CSS3的問題 HTML5實現一個能夠移動的小坦克示例代碼 HTML5 Web存儲的localStorage和sessionStorage的使用方法讓 JavaScript 拯救 HTML5 的離線存儲

熱門推薦

html5新增的標簽和使用的方法 HTML5 Canvas的性能提高技巧經驗分享利用HTML5 Canvas制作一個簡單的打飛機游戲 HTML5 對各個標簽的定義與規定：link HTML5設計原理 HTML5 video播放器全屏(fullScreen)方法實例基於canvas實現物理運動效果與動畫效果(一) HTML5表單之Input 類型-search 驚艷超炫的HTML 5應用程序示例

大家都在看

jquery1.9移除和修改的apis JavaScript來實現打開鏈接頁面的簡單實例 js如何判斷輸入字符串長度 XML 技術指南(1) CSS網頁布局的好與壞 js 限制input只能輸入數字、字母和漢字等等 JS中onpropertychange和onchange事件區別小結 jQuery判斷元素是否存在的可靠方法

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|

Copyright © DIV+CSS佈局教程網 All Rights Reserved