HTML5中使用canvas繪制時鐘

近看到頭條里有幾篇用HTML5繪制時鐘的文章，感覺這個真的很簡單，于是自己花了兩個小時寫了一個，僅供大家相互探討。

首先我們分析需求，在沒有任何圖片的情況下，我們必須要繪制地盤，刻度，時針，分針以及秒針，并且每秒繪制一次秒針，時

針，分針的刻度也同意是有規(guī)律可循的，例如時針是分針走360度后時針走30度，也就是12：1的比例，秒針走360度，分針走6度，也就是60：1的角度比例，以此我們可以計算任意時刻的時，分，秒的角度值。每秒總的角度比為，時針：分針：秒針=1：12：720。需求分析結束后，便可以開始著手繪制我們的表盤了。

首先創(chuàng)建一個canvas.html文件，內容如下：

<!DOCTYPE html>

<html>

<head>

<title>canvas時鐘Demo</title>

</head>

<body>

<canvas id="canvas" width="600px" height="600px" style="background-color: #F0F8FF; position:absolute;left: 100px;">該瀏覽器不支持canvas</canvas>

</body>

</html>

canvas.html

接下來在js文件夾中創(chuàng)建一個canvas.js文件

創(chuàng)建canvas.js文件

并將所有的邏輯寫到這個js文件中。

首先定義所有的常量，如圖所示：

繪制中所有使用到的常量

var canvas=null;

var context=null;

var RADIUS=200; //半徑

var POINTX=300; //原點X

var POINTY=300; //原點Y

var HOURHANDLEN=100; //時針長度

var MINUTESHANDLEN=140; //分針長度

var SECONDHANDLEN=180; //秒針長度

var HOURHANDWIDTH=5; //時針寬度

var MINUTESHANDWIDTH=3; //分針寬度

var SECONDHANDWIDTH=1; //秒針寬度

var HOURHANDCOLOR='#FF00FF'; //時針顏色

var MINUTESHANDCOLOR='#CC10FF'; //分針顏色

var SECONDHANDCOLOR='#1155BB'; //秒針顏色

創(chuàng)建一個初始化的方法function init(){}，用來初始化canvas和context的內容，如果著這里對于context這個中文翻譯為上下文的東西還不懂的話可以自行查閱相關文檔（最基礎的了，不懂就別接下看了，看了也白瞎）。

init()初始化方法

為何是canvas.getContext("2d")，因為API提供的就是如果繪制2D圖片的上下文就是傳遞這個2d去取得這個對象。

接下來繪制表盤和刻度，我們分析一下，因為刻度都是有規(guī)律的，每五條就有一條是整點的刻度，所以我們用5來取余來繪制不同樣式的刻度。

/** 繪制鐘表圓盤 */

function drawCircle(){

context.beginPath();

context.strokeStyle="black"

context.lineWidth=4;

context.arc(POINTX, POINTY, RADIUS, 0, Math.PI*2);

context.closePath();

context.stroke();

context.beginPath();

context.fillStyle="black";

context.arc(POINTX, POINTY, 4, 0, Math.PI * 2);

context.closePath();

context.fill();

}

繪制刻度內容如下

/** 繪制鐘表的時間刻度

function drawLine(){

var startP={x : 0, y: 0};

var endP={x : 0, y : 0};

var numP={x : 0, y : 0};

var fillColor="red";

var len=10;

var num=null;

for(var i=0;i < 60; i ++){

if(i % 5==0){

fillColor="red";

len=10;

num=12 - Math.floor(i/5);

numP.x=POINTX - 4 - (RADIUS - 20) * Math.sin(i * Math.PI/30);//4為微調數(shù)字位置

numP.y=POINTX + 4 - (RADIUS - 20) * Math.cos(i * Math.PI/30);//4為微調數(shù)字位置

}

else{

fillColor="black";

len=5;

num=null;

}

startP.x=POINTX - RADIUS * Math.sin(i * Math.PI/30);

startP.y=POINTX - RADIUS * Math.cos(i * Math.PI/30);

endP.x=POINTX - (RADIUS - len) * Math.sin(i * Math.PI/30);

endP.y=POINTX - (RADIUS - len) * Math.cos(i * Math.PI/30);

drawLineCore(startP, endP, fillColor, num, numP);

}

/**

* 根據提供的起始點繪制表盤刻度

* @param {Object} startP

* @param {Object} endP

* @param {Object} fillColor

function drawLineCore(startP, endP, fillColor, num, numP){

context.beginPath();

context.lineWidth=2;

context.strokeStyle=fillColor;

context.moveTo(startP.x, startP.y);

context.lineTo(endP.x, endP.y);

context.stroke();

context.closePath();

if(num !==null){

context.beginPath();

context.lineWidth=1;

context.strokeStyle=fillColor;

context.strokeText(num + "", numP.x, numP.y);

context.stroke();

context.closePath();

}

繪制完表盤和刻度后，我們開始繪制時分秒針了，根據我們剛剛分析的角度比例關系，我們寫如下代碼：

function drawHands(){

setInterval(function(){

context.clearRect(0,0,500,500);

drawLine();

drawCircle();

drawHandByData(3);

drawHandByData(2);

drawHandByData(1);

},1000)

}

/**

* 根據類型和指針的數(shù)字來繪制圖形，統(tǒng)一換算成秒數(shù)來計算角度

* @param {Object} type 1為時針，2為分針，3為秒針

function drawHandByData(type){

var date=new Date();

var curHour=date.getHours();

var curMinutes=date.getMinutes();

var curSecond=date.getSeconds();

var angle=0;

var handLen=0;

var allSecond=0;

var handWidth=0;

var handColor="";

if(type==1){

var hour=curHour >=12 ? curHour - 12 : curHour;

allSecond=hour * 3600 + curMinutes * 60 + curSecond;

angle=(Math.PI/6) * (allSecond / 3600);

handLen=HOURHANDLEN;

handWidth=HOURHANDWIDTH;

handColor=HOURHANDCOLOR;

}

else if(type==2){

handLen=MINUTESHANDLEN;

allSecond=curMinutes * 60 + curSecond;

angle=(Math.PI / 30) * (allSecond / 60)

handWidth=MINUTESHANDWIDTH;

handColor=MINUTESHANDCOLOR;

}

else if(type==3){

handLen=SECONDHANDLEN;

allSecond=curSecond;

angle=(Math.PI / 30) * allSecond;

allSecond=curSecond;

handWidth=SECONDHANDWIDTH;

handColor=SECONDHANDCOLOR;

}

drawHand(Math.PI - angle, handLen, handWidth, handColor);

}

/**

* 繪制時針，分針，秒針統(tǒng)一方法

* @param {Object} angle 時針，分針，秒針的角度

* @param {Object} handLen 時針，分針，秒針的長度

* @param {Object} handWidth 時針，分針，秒針的寬度

* @param {Object} handColor 時針，分針，秒針的寬度

function drawHand(angle, handLen, handWidth, handColor){

var endP={x:0, y:0}

endP.x=POINTX + Math.sin(angle) * handLen;

endP.y=POINTY + Math.cos(angle) * handLen;

context.beginPath();

context.lineWidth=handWidth;

context.strokeStyle=handColor;

context.moveTo(POINTX, POINTY);

context.lineTo(endP.x, endP.y);

context.stroke();

context.closePath();

}

最后別忘了調用各個函數(shù)：

init();

drawLine();

drawCircle();

drawHands();

整個JS文件我是用的是閉包寫法，如：

(function(win){

function init(){}

drawLine(){}

drawCircle(){}

drawHands(){}

//最后調用

init();

drawCircle();

drawLine();

drawHands();

})(window)

希望大家喜歡我的分享，如果可以請點贊，多多留言。謝謝

用canvas做的一個時鐘，先看效果

1、繪制時鐘圓盤

繪制時鐘圓盤，其實就是繪制一個圓，這個比較簡單，代碼如下：

2、標繪刻度

標繪刻度的難點在于確定刻度點的位置，這需要用到一些的幾何知識，圓弧和三角函數(shù)。

如上圖，要求圓上任意一點A的位置，通過三角函數(shù)可以推出：

x1=BC=cos(a)*AC
y1=BC=sin(a)*AC

其中AC就是半徑，是已知的

現(xiàn)在我們要來確定角a的度數(shù)：

小時刻度：12個刻度，每一小時的角度為：360/12，弧度為：2π/12
分鐘刻度：60個刻度，每一分鐘的角度為：360/60，弧度為：2π/60

有了半徑和角度我們就可以算出坐標，這樣就可以繪制刻度了。注意js里面用的是弧度。

為了方便，我們用ctx.translate()把畫布原點重定向到了圓心，這改變了畫布的狀態(tài)，為了不影響后續(xù)的繪制，每次繪完之后都要把畫布恢復為原來的狀態(tài)，具體操作就是：重定向畫布原點之前，用ctx.save()保存畫布狀態(tài)，繪制完成之后，用ctx.restore()恢復之前保存的畫布狀態(tài)。

//保存畫布當前環(huán)境狀態(tài)
ctx.save();
//重定向畫布原點
ctx.translate(250,250);
//繪制代碼......
//恢復之前保存的狀態(tài)
ctx.restore();

繪制小時刻度代碼

同理，繪制分鐘刻度就簡單，把12換成60就可以了。

繪制分鐘刻度代碼

3、畫時針

時針、分針、秒針都是和當前時間有關，所以先要獲取當前時間的小時數(shù)、分鐘數(shù)、秒數(shù)。

//得到當前時間
var now=new Date();
//當前小時數(shù)
var hour=now.getHours();
//當前分鐘數(shù)
var minute=now.getMinutes();
//當前秒數(shù)
var second=now.getSeconds();
hour=hour+minute/60;

畫時針時，我們先畫出指向12點的時針：

//指向12點的時針
ctx.beginPath();
ctx.lineWidth=8;
ctx.lineCap="round";
ctx.moveTo(0,10);
ctx.lineTo(0,-120);
ctx.stroke()

之后每一個時刻度點的時針就是把指向12點的時針旋轉一定的度數(shù)：

//旋轉度數(shù)
ctx.rotate(hour*2*Math.PI/12);

繪制時針代碼

同理，時針繪制好之后，分針和秒針也就簡單，直接看代碼。

繪制分針代碼

繪制秒針代碼

為了好看我們再畫一個中心點。

繪制中心點代碼

最后，為了讓時鐘實時轉動，需要加一個定時任務，每秒執(zhí)行一次。

//一秒鐘執(zhí)行一次
setInterval(clock,1000);

還要注意，每次重繪都要清除畫布：

 ctx.clearRect(0,0,canvas.width,canvas.height);

最終完整的代碼邏輯如下：

這樣一個時鐘就完成了，如果想看更詳細的操作，推薦觀看視頻版。

款基于HTML5和CSS3的圓盤時鐘動畫，它的特點是圓盤時鐘側邊帶有實時更新的數(shù)字時鐘，而且時鐘在走動時還會發(fā)出滴答滴答的聲音。

效果圖

代碼：

JavaScript代碼：

頁面布局：

css樣式：

在線咨詢

上一篇：一步到位！開學季AI筆記本推薦
下一篇：Spire.Doc for Java 10.7.10

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

HTML5中使用canvas繪制時鐘

1、繪制時鐘圓盤

2、標繪刻度

3、畫時針

代碼：

您的項目需求

2、標繪刻度