整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天給大家用canvasu做一個時鐘，希望大家自己也能夠多練練，學習需要案例的積累。文章的代碼自己可以拿去練習下。
主要的知識點:
狀態保存 context.save()
狀態恢復 context.restore()
旋轉 context.rotate(弧度)
平移 context.translate(x,y) x,y 是需要移動到的目標位置坐標
縮放 context.scale(1.5,1.5) 1.5,1.5 是縮放比例, 將原來的畫布放大1.5倍
畫圓弧 context.arc(x,y,r,初始弧度, 最終弧度)
清空矩形內容context.clearRect(x,y,width,height)
時間(時,分,秒)的角度換算
效果圖就是這樣：
代碼如下：
學習javascript也是有門檻的，就是你的html和css至少還比較熟練，您不能連html這東東是干啥的都不知道就開始學javascript了，學乘除前，學好加減法總是有益無害的。
再說二點建議：
不要急著看一些復雜的javascript網頁特效的代碼，這樣除了打擊你的自信心，什么也學不到
看網上什么幾天精通javascript的，直接跳過吧，沒戲
近看到頭條里有幾篇用HTML5繪制時鐘的文章，感覺這個真的很簡單，于是自己花了兩個小時寫了一個，僅供大家相互探討。
首先我們分析需求，在沒有任何圖片的情況下，我們必須要繪制地盤，刻度，時針，分針以及秒針，并且每秒繪制一次秒針，時
針，分針的刻度也同意是有規律可循的，例如時針是分針走360度后時針走30度，也就是12：1的比例，秒針走360度，分針走6度，也就是60：1的角度比例，以此我們可以計算任意時刻的時，分，秒的角度值。每秒總的角度比為，時針：分針：秒針 = 1：12：720。需求分析結束后，便可以開始著手繪制我們的表盤了。
首先創建一個canvas.html文件，內容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas時鐘Demo</title>
</head>
<body>
<canvas id="canvas" width="600px" height="600px" style="background-color: #F0F8FF; position:absolute;left: 100px;">該瀏覽器不支持canvas</canvas>
<script type="text/javascript" src="js/canvas.js" ></script>
</body>
</html>
canvas.html
接下來在js文件夾中創建一個canvas.js文件
創建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'; //秒針顏色
創建一個初始化的方法function init(){}，用來初始化canvas和context的內容，如果著這里對于context這個中文翻譯為上下文的東西還不懂的話可以自行查閱相關文檔（最基礎的了，不懂就別接下看了，看了也白瞎）。
init()初始化方法
為何是canvas.getContext("2d")，因為API提供的就是如果繪制2D圖片的上下文就是傳遞這個2d去取得這個對象。
接下來繪制表盤和刻度，我們分析一下，因為刻度都是有規律的，每五條就有一條是整點的刻度，所以我們用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為微調數字位置
numP.y = POINTX + 4 - (RADIUS - 20) * Math.cos(i * Math.PI/30);//4為微調數字位置
}
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)
}
/**
* 根據類型和指針的數字來繪制圖形，統一換算成秒數來計算角度
* @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);
}
/**
* 繪制時針，分針，秒針統一方法
* @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();
}
最后別忘了調用各個函數：
init();
drawLine();
drawCircle();
drawHands();
整個JS文件我是用的是閉包寫法，如：
(function(win){
function init(){}
drawLine(){}
drawCircle(){}
drawHands(){}
//最后調用
init();
drawCircle();
drawLine();
drawHands();
})(window)
希望大家喜歡我的分享，如果可以請點贊，多多留言。謝謝
擊查看時鐘特效
對于javascript特效的學習，重要的是邏輯思路，所以這個時鐘特效不是很華麗，但是功能都展現出來了，而學習javascript并不是單純的扣代碼，很多人都覺得，摳完代碼，能看懂了，就算是學會了，但是，說的難聽點這樣的學習方式其實是自斷前程的學習方法，若是一門月薪過萬的技術有那么簡單學習，那么怎么還會有那么多人找不到工作呢？學習javascript特效最重要的是仔細研究一個特效的思路方法，然后根據這個特效可以擴展最初其他類似功能或者更復雜的特效，才算徹底的掌握好了這方面的知識！我的頭條號里面也有許多華麗的特效以及HTML5/javascript游戲，有興趣的朋友可以去看看！文末附上本次javascript時鐘的源碼！
如果想要更多的企業求職加分項目，案例，學習方法可以來一下我的前端群570946165，每天都會精挑細選一個特效，項目出來詳細講解，分享！包括答疑解惑！
代碼過長需要文檔版源碼來我的前端群570946165，已上傳到群文件
頭條號里有許多web前端學習視頻/源碼，企業常用特效/案例/項目，敬請關注！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
