學(xué)完HTML5，用Canvas做了一個時鐘，代碼一起分享

天給大家用canvasu做一個時鐘，希望大家自己也能夠多練練，學(xué)習(xí)需要案例的積累。文章的代碼自己可以拿去練習(xí)下。

這里還是要說一下我的前端學(xué)習(xí)群：594959296，從我一個人到現(xiàn)在的1369人都是我每篇文章每個特效聚集的小伙伴，可以說都是我們大前端的學(xué)霸啊，不定期分享干貨。想學(xué)到東西的都可以來，歡迎初學(xué)和進(jìn)階中的小伙伴

主要的知識點(diǎn):

狀態(tài)保存 context.save()
狀態(tài)恢復(fù) context.restore()
旋轉(zhuǎn) context.rotate(弧度)
平移 context.translate(x,y) x,y 是需要移動到的目標(biāo)位置坐標(biāo)
縮放 context.scale(1.5,1.5) 1.5,1.5 是縮放比例, 將原來的畫布放大1.5倍
畫圓弧 context.arc(x,y,r,初始弧度, 最終弧度)
清空矩形內(nèi)容context.clearRect(x,y,width,height)
時間(時,分,秒)的角度換算

效果圖就是這樣：

代碼如下：

學(xué)習(xí)javascript也是有門檻的，就是你的html和css至少還比較熟練，您不能連html這東東是干啥的都不知道就開始學(xué)javascript了，學(xué)乘除前，學(xué)好加減法總是有益無害的。

再說二點(diǎn)建議：

不要急著看一些復(fù)雜的javascript網(wǎng)頁特效的代碼，這樣除了打擊你的自信心，什么也學(xué)不到
看網(wǎng)上什么幾天精通javascript的，直接跳過吧，沒戲

如果想看到更加系統(tǒng)的文章和學(xué)習(xí)方法經(jīng)驗(yàn)可以關(guān)注我的微信公眾號：‘web前端課程’關(guān)注后回復(fù)‘給我資料’可以領(lǐng)取一套完整的學(xué)習(xí)視頻

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

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

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

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

<!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; //原點(diǎn)X

var POINTY = 300; //原點(diǎn)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的內(nèi)容，如果著這里對于context這個中文翻譯為上下文的東西還不懂的話可以自行查閱相關(guān)文檔（最基礎(chǔ)的了，不懂就別接下看了，看了也白瞎）。

init()初始化方法

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

接下來繪制表盤和刻度，我們分析一下，因?yàn)榭潭榷际怯幸?guī)律的，每五條就有一條是整點(diǎn)的刻度，所以我們用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();

}

繪制刻度內(nèi)容如下

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

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為微調(diào)數(shù)字位置

numP.y = POINTX + 4 - (RADIUS - 20) * Math.cos(i * Math.PI/30);//4為微調(diào)數(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);

}

/**

* 根據(jù)提供的起始點(diǎn)繪制表盤刻度

* @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();

}

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

function drawHands(){

setInterval(function(){

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

drawLine();

drawCircle();

drawHandByData(3);

drawHandByData(2);

drawHandByData(1);

},1000)

}

/**

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

* @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();

}

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

init();

drawLine();

drawCircle();

drawHands();

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

(function(win){

function init(){}

drawLine(){}

drawCircle(){}

drawHands(){}

//最后調(diào)用

init();

drawCircle();

drawLine();

drawHands();

})(window)

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

擊查看時鐘特效

極簡主義，程序員javascript打造極簡時鐘特效

對于javascript特效的學(xué)習(xí)，重要的是邏輯思路，所以這個時鐘特效不是很華麗，但是功能都展現(xiàn)出來了，而學(xué)習(xí)javascript并不是單純的扣代碼，很多人都覺得，摳完代碼，能看懂了，就算是學(xué)會了，但是，說的難聽點(diǎn)這樣的學(xué)習(xí)方式其實(shí)是自斷前程的學(xué)習(xí)方法，若是一門月薪過萬的技術(shù)有那么簡單學(xué)習(xí)，那么怎么還會有那么多人找不到工作呢？學(xué)習(xí)javascript特效最重要的是仔細(xì)研究一個特效的思路方法，然后根據(jù)這個特效可以擴(kuò)展最初其他類似功能或者更復(fù)雜的特效，才算徹底的掌握好了這方面的知識！我的頭條號里面也有許多華麗的特效以及HTML5/javascript游戲，有興趣的朋友可以去看看！文末附上本次javascript時鐘的源碼！

如果想要更多的企業(yè)求職加分項(xiàng)目，案例，學(xué)習(xí)方法可以來一下我的前端群570946165，每天都會精挑細(xì)選一個特效，項(xiàng)目出來詳細(xì)講解，分享！包括答疑解惑！

HTML5/javascript時鐘特效源碼

代碼過長需要文檔版源碼來我的前端群570946165，已上傳到群文件

頭條號里有許多web前端學(xué)習(xí)視頻/源碼，企業(yè)常用特效/案例/項(xiàng)目，敬請關(guān)注！

在線咨詢

上一篇：下拉菜單設(shè)計(jì)指南
下一篇：四個工程機(jī)械類網(wǎng)站模板自適應(yīng)企業(yè)建站首選精品大氣html模板

您的項(xiàng)目需求

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

整合營銷服務(wù)商

學(xué)完HTML5，用Canvas做了一個時鐘，代碼一起分享

如果想看到更加系統(tǒng)的文章和學(xué)習(xí)方法經(jīng)驗(yàn)可以關(guān)注我的微信公眾號：‘web前端課程’關(guān)注后回復(fù)‘給我資料’可以領(lǐng)取一套完整的學(xué)習(xí)視頻

極簡主義，程序員javascript打造極簡時鐘特效

HTML5/javascript時鐘特效源碼

您的項(xiàng)目需求

學(xué)完HTML5，用Canvas做了一個時鐘，代碼一起分享