HTML5之Canvas時鐘小程式
阿新 • • 發佈：2019-01-10
這一段時間有空在看Canvas，由於以前開發過ActionScript版本的時鐘，想著Canvas也一定能夠實現，所以花了幾個小時來調了一下，最終出來了，很是開心，所以在這裡記錄一下：
首先奉上效果圖，雖然比較醜，沒有用CSS過多的去渲染，這裡完成了基本功能
：
下面是我的目錄結構：
目錄結構很簡單，下面看看程式碼是怎麼實現的：
myClock.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title 模擬時鐘類：
/**
* Created by wulin on 2016/12/16.
* 模擬時鐘類。程式入口
*/
window.onload = init;
function init() {
var simpleClock = new SimpleClock();
simpleClock.initClock();
}
function SimpleClock() {
this.face = null;
this.initClock = function() {
this.face = new ClockFace(200);
/*手動初始化*/ 鐘面實現類：
/**
* Created by wulin on 2016/12/16.
* 鐘面實現類
*/
function ClockFace(w) {
// 圓鍾寬高等長
this.w = w;
/*設定半徑*/
this.radius = Math.round(this.w / 2);
/*圓心座標*/
this.centerX = this.radius;
this.centerY = this.radius;
this.currentTime;
this.drawing = document.getElementById("drawing");
this.init = function() {
if(!this.drawing.getContext) {
return;
}
this.context = this.drawing.getContext("2d");
//開始路徑
this.context.beginPath();
//清楚canvas內容
this.context.clearRect(0,0,200,200);
/*繪製圓圈*/
this.drawBorder();
//變換原點
this.context.translate(this.centerX, this.centerY);
/*繪製小時文字*/
this.drawHourLabels();
//初始化時間
this.draw();
/*繪製 針*/
this.createHands();
//描邊路徑
this.context.stroke();
//變換原點
this.context.translate(-100, -100);
this.context.closePath();
};
this.draw = function() {
this.currentTime = new Date();
this.showTime(this.currentTime);
};
//繪製圓圈
this.drawBorder = function() {
//繪製外圓
this.context.arc(this.centerX, this.centerY, this.radius, 0, 2 * Math.PI, false);
//繪製內圓
this.context.moveTo(this.w - 6, this.centerY);
this.context.arc(this.centerX, this.centerY, this.radius - 6, 0, 2 * Math.PI, false);
};
//繪製小時文字
this.drawHourLabels = function() {
for(var i=1; i <= 12; i++) {
/*夾角角度(弧度)*/
var angleInRadians = i * 30 * (Math.PI/180);
//顯示位置
var x = 0.8 * this.radius * Math.sin(angleInRadians);
var y = -(0.8 * this.radius * Math.cos(angleInRadians));
//設定文字樣式
this.context.font = "bold 14px Arial";
this.context.textAlign = "center";
this.context.textBaseline = "middle";
this.context.fillText(i.toString(), x, y);
}
};
this.createHands = function() {
//時針
var hourX = 0.5 * this.radius * Math.sin(this.hourHandRotation);
var houurY = -(0.5 * this.radius * Math.cos(this.hourHandRotation));
this.drawHand(hourX, houurY);
/**
* 分針*/
var minuteX = 0.65 * this.radius * Math.sin(this.minuteHandRotation);
var minuteY = -(0.65 * this.radius * Math.cos(this.minuteHandRotation));
this.drawHand(minuteX, minuteY);
/**
* 秒針*/
var secondX = 0.75 * this.radius * Math.sin(this.secondHandRotation);
var secondY = -(0.75 * this.radius * Math.cos(this.secondHandRotation));
this.drawHand(secondX, secondY);
};
this.drawHand = function(x, y) {
console.log(x + "," + y);
this.context.moveTo(0, 0);
this.context.lineTo(x, y);
};
/**
* 顯示時間；
* @param time
*/
this.showTime = function(time) {
/**
* 擷取時間段*/
var seconds = time.getSeconds();
var minutes = time.getMinutes();
var hours = time.getHours();
/**
* 鐘面初始時，時針、分針以及秒針都指向6點；
* 如果設定this.secondHandRotation = 90;就表示此時秒針順時針轉90度；*/
this.secondHandRotation = (seconds*6) * (Math.PI/180); // 可以算出1秒6度；
this.minuteHandRotation = (minutes*6) * (Math.PI/180); // 同上，1分6度；
this.hourHandRotation = ((hours*30) + (minutes*0.5)) * (Math.PI/180); //知道，1小時30度，那1分就是60分之30度，即1分時時鐘轉動0.5度；
}
}
canvas版本的時鐘是參照前一篇文章Flex版本時鐘
來開發的。大致的思路和結構都差不多，在這裡我沒有用canvas的roate()旋轉方法實現，效率較roate方法相對來說比較低下一點，改日奉上roate的使用方法。還有些文章的時間比較倉促，程式碼寫完也沒來得及過多的優化，不足之處還請見諒。
友情提示：請尊重作者勞動成果，如需轉載本部落格文章請註明出處！謝謝合作！