canvas畫時鐘，重拾樂趣!

canvas時鐘--效果圖

一、先來簡單介紹畫時鐘需要的canvas知識

1.在HTML頁面中添加canvas元素，必須定義canvas元素的id屬性值以便接下來的調用。

HTML代碼：

<canvas id="canvas" class="canvas" width="400" height="400" border:></canvas>

2.使用id尋找canvas元素，在js代碼中使用document.getElementById()等方法獲取id。

var canvas = document.getElementById("canvas");

3.通過canvas元素的getContext方法來獲取其上下文（Context）,即創建Context對象，以獲取允許繪畫的2D環境。

var ctx = canvas.getContext("2d");

4.先來認識一下canvas的繪制方法。

（1）繪制矩形的兩種方法：fillRect 和 strokeRect

前者用于繪制用顏色填充（fill）區域的矩形，后者用于繪制輪廊（stroke）或線條。圖形指定顏色用到了兩個屬性，即fillStyle 和 strokeStyle，前者用于指定要繪制的填充區域的顏色，后者用于指定要繪制的線條顏色。

//繪制填充顏色矩形，默認黑色
ctx.fillStyle="red";
ctx.fillRect(0,0,200,100);

//繪制有顏色線條
ctx.strokeStyle="blue";
ctx.strokeRect(0,0,100,50);

（2）繪制圓形

繪制圓形是會用到四種方法：beginPath、arc、closePath和fill或stroke。

//畫圓填充紅顏色
//繪制園用法：ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise);
ctx.beginPath();
ctx.fillStyle="red";
ctx.arc(0,0,100,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();

//線條藍色畫圓
ctx.beginPath();
ctx.strokeStyle="blue";
ctx.lineWidth=10;//設置線條寬度
ctx.arc(0,0,174,0,Math.PI*2,true);
ctx.stroke();

（3）繪制直線

用到兩個主要方法：moveTo 和 lineTo 以及stroke。

ctx.moveTo(x,y)——規定線起始點(x,y)。ctx.lineTo(x,y)——規定直線路線的終點。

ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();//該方法用于沿該路徑繪制線條

二、畫canvas時鐘過程

首先，定義畫布字體的為圓角，讓我們看起來美美的：ctx.lineCap="round";

其次，非常重要，時鐘是隨著時分秒針的轉動而轉動的，so——我們需要畫布范圍內必須設計畫布不斷清除和刷新：ctx.clearRect(0,0,400,400);

再次，一個畫布初始中心點（0,0）是在畫布左上角，so——畫時鐘需要把中心點轉移：ctx.translate(200,200);

最后，也是最重要的，每多一個save()保存就必須在下面補上一個還原restore();

1、畫分刻線

畫線嘛，上面咱們已經講過畫線的步驟，就不多說啦！只需要注意用到rotate()方法將，先用ctx.moveTo(),ctx.lineTo在畫布右側畫出第一根分刻線，再定義需要旋轉的角度變量——rotateD,經過ctx.rotate(rotateD)方法來for循環以及畫布不斷清除刷新的狀態，即可畫出分刻線。

當然這里還需要注意一點：畫布需要用到另個方法來包含要執行的內容，分別是save()、restore()。save() 方法把當前狀態的一份拷貝壓入到一個保存圖像狀態的棧中。這就允許你臨時地改變圖像狀態，然后，通過調用 restore() 來恢復以前的值。我打個比喻：我有一只手，戴上手套去完成一些事情，手套摘下來之后，我的手還是我的手。額，有點。。。呵呵

//畫刻度線
        for (var i = 0; i < 60; i++) {
            ctx.save();
            ctx.beginPath();
            var rotateD = i*Math.PI*2/60;
            ctx.rotate(rotateD);
            ctx.lineWidth = 4;
            ctx.moveTo(170,0);
            ctx.lineTo(160,0);
            ctx.stroke();
            ctx.restore();
        };

2、畫時刻線

同理，畫時刻線只需要修改線寬以及旋轉角度

3、畫時針

在前面new一個data變量var date = new Date;，并且定義一個時針隨時間變化旋轉角度也變化的變量rotateH。

小時針旋轉角度rotateH；

公式：rotateH = 時針旋轉角度 +分針旋轉角度/12 - 直角 = data.getHours()/12*2*Math.PI + date.getMinutes()/60/12*Math.PI*2 - Math.PI/2;

(為什么會減Math.PI/2呢，因為時針的初始值為（-12,0）、（125,0）；針指向正好是在三點中位置，所以需要減掉一個直角才能從十二點開始旋轉)。

4、畫分針

定義一個分針隨時間變化旋轉角度也變化的變量rotateM。

公式：rotateM = 分針旋轉角度 + 秒針旋轉角度/60 -直角 = date.getMinutes()/60*Math.PI*2 + date.getSeconds()/60/60*Math.PI*2 - Math.PI/2;

5、畫秒針

定義一個分針隨時間變化旋轉角度也變化的變量rotateS。

公式：rotateM = 秒針旋轉角度 - 減直角 = date.getSeconds()/60*Math.PI*2 - Math.PI/2;

6、時針數字略

三、canvas實現時鐘完整代碼

js完整代碼：

jQuery(function($){
    function clock(){
        var canvas= document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var date = new Date;
        ctx.lineCap = "round";//字體變圓角
        ctx.clearRect(0,0,400,400);//不斷清除畫布 不斷再執行刷新

        ctx.save();//每多一個保存就必須在下面補上一個還原restore()
        ctx.translate(200, 200);//中心點轉移

        //畫刻度線
        for (var i = 0; i < 60; i++) {
            ctx.save();
            ctx.beginPath();
            var rotateD = i*Math.PI*2/60;
            ctx.rotate(rotateD);
            ctx.lineWidth = 4;
            ctx.moveTo(170,0);
            ctx.lineTo(160,0);
            ctx.stroke();
            ctx.restore();
        };
        for (var i = 0; i < 12; i++) {
            ctx.save();
            ctx.beginPath();
            var rotateB = i*Math.PI*2/12;
            ctx.lineWidth = 6;
            ctx.rotate(rotateB);
            ctx.moveTo(170,0);
            ctx.lineTo(150,0);
            ctx.stroke();
            ctx.restore();
        };
        //畫時針
        var rotateH = date.getHours()/12*Math.PI*2 + date.getMinutes()/60/12*Math.PI*2 - Math.PI/2;
        ctx.save();
        ctx.beginPath();
        ctx.rotate(rotateH);
        ctx.lineWidth=12;
        ctx.moveTo(-12,0);
        ctx.lineTo(125,0);
        ctx.stroke();
        ctx.restore();

        //畫分針
        var rotateM = date.getMinutes()/60*Math.PI*2 + date.getSeconds()/60/60*Math.PI*2 - Math.PI/2;
        ctx.save();
        ctx.strokeStyle="red";
        ctx.beginPath();
        ctx.rotate(rotateM);
        ctx.lineWidth=9;
        ctx.moveTo(-12,0);
        ctx.lineTo(135,0);
        ctx.stroke();
        ctx.restore();

        //畫秒針
        var rotateS = date.getSeconds()/60*Math.PI*2 - Math.PI/2;
        ctx.save();
        ctx.strokeStyle="red";
        ctx.beginPath();
        ctx.rotate(rotateS);
        ctx.lineWidth=6;
        ctx.moveTo(-16,0);
        ctx.lineTo(140,0);
        ctx.stroke();

        //畫中心圓點
        ctx.fillStyle="red";
        ctx.arc(0,0,10,0,2*Math.PI)
        ctx.closePath();
        ctx.fill();

        //畫秒針圓圈頭
        ctx.strokeStyle="red";
        ctx.moveTo(160,0);
        ctx.arc(150,0,8,0,2*Math.PI);
        ctx.stroke();
        ctx.restore();

        // 畫clock的表盤
        ctx.beginPath();
        ctx.strokeStyle="blue";
        ctx.lineWidth=10;
        ctx.arc(0,0,174,0,Math.PI*2);
        ctx.stroke();

        ctx.restore();
        window.requestAnimationFrame(clock);
    };
    window.requestAnimationFrame(clock);
});

 

 

來自：http://www.cnblogs.com/beyond-utf-8/p/beyond-utf-8.html