js Canvas實現(xiàn)圓形時鐘教程
閱讀本文需要一點關(guān)于canvas基本用法的基礎(chǔ)，本文實例為大家分享了HTML5 Canvas實現(xiàn)圓形時鐘簡易教程
第一步：新建一個最簡單的html文件，并且在<body>標簽中定義元素canvas。
canvas.html
<html> <head> <title>Canvas clock tutorial</title> </head> <body> <canvas id="clock" width="400" height="400"></canvas> </body> </html>
在這一步完成后，用瀏覽器打開canvas.html，你會發(fā)現(xiàn)什么都看不到，這是因為我們沒有在canvas上繪制任何東西，同時也沒有為其定義邊界。
在canvas .html中為<canvas>添加css樣式屬性：
<html>
<head>
<title>Canvas clock tutorial</title>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="clock" width="400" height="400"></canvas>
</body>
</html>
這樣，我們就能看到<canvas>的輪廓。
當沒有設(shè)置寬度和高度的時候，canvas會初始化寬度為300像素和高度為150像素。該元素可以使用CSS來定義大小，但在繪制時圖像會伸縮以適應(yīng)它的框架尺寸：如果CSS的尺寸與初始畫布的比例不一致，它會出現(xiàn)扭曲。
注意: 如果你繪制出來的圖像是扭曲的, 嘗試在<canvas>的屬性中明確規(guī)定寬和高，而不是使用CSS。
第二步：新建實現(xiàn)繪制圓形時鐘邏輯的draw.js文件，進行初始化工作。
毫無疑問，要實現(xiàn)時鐘，就需要獲取系統(tǒng)時間。
在js語法中，可以利用Date()來實時獲取時間。
var currentTime = new Date();
隨后，要掌握的是canvas繪制圓形的函數(shù)：
arc(x, y, radius, startAngle, endAngle, anticlockwise)該方法表示畫一個以（x,y）為圓心的、以radius為半徑的圓?。▓A），從startAngle開始到endAngle結(jié)束，按照anticlockwise給定的方向（默認順時針（true））來生成。
其中stratAngle和endAngle的單位并不是我們所熟悉的角度單位，而是弧度單位。一個完整的圓跨弧度2π。
在canvas的坐標系中，是以x軸正方向所在的方向為0弧度。時鐘指針按順時針方向轉(zhuǎn)，以2π為一個周期，因此如下圖所示，時鐘指針，是從(-1/2)*π位置開始走的。
當前時間的弧度計算方式如下：
//將一個時鐘周期12等分，對12求余是因為Date().getHours將返回24小時制的小時。 hour = (currentTime.getHours() % 12 ) * (2 * Math.PI /12); //MINUTE 一圈60等分 minute = (currentTIme.getMinutes) * (2* Math.PI / 60); //SECOND 一圈60等分 second = (currentTime.getSeconds) * (2 * Math.PI / 60);
由于在canvas中時鐘圓從(-1/2)*π開始走，因此我們還需要給它們加上(-1/2)*π的起始偏移量。
初步得到draw.js:
function draw() {
//canvas繪畫的前提工作
var canvas = document.getElementById('clock');
var currentTime = new Date();
var hour = (currentTime.getHours()%12) * Math.PI/6;
var minute = currentTime.getMinutes() * Math.PI/30;
var second = currentTime.getSeconds() * Math.PI/30;
hour = hour - Math.PI * (1/2);
minute = minute - Math.PI * (1/2);
second = second - Math.PI * (1/2);
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(200,200,50,Math.PI*(-1/2),hour,false);
ctx.moveTo(200,100);
ctx.arc(200,200,100,Math.PI*(-1/2),minute,false);
ctx.moveTo(200,50);
ctx.arc(200,200,150,Math.PI*(-1/2),second,false);
ctx.stroke();
}
}
同時在canvas.html中 加入draw.js的引用。
<html>
<head>
<title>Canvas clock tutorial</title>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
<script src="draw.js" type="text/javascript"></script>
</head>
<body onload="draw();">
<canvas id="clock" width="400" height="400"></canvas>
</body>
</html>
在完成了第二步之后，我們可以看到一個當前時間的圓形時鐘輪廓。那么接下來，就是讓它動起來！
第三步：使用requestAnimationFrame()方法讓時鐘動起來。
requestAnimationFrame()的執(zhí)行頻率是1秒60幀，用戶可以在requestAnimationFrame定義事件，使其在每一幀中重復(fù)、迭代完成相應(yīng)的事件。
在我們這個案例中，每一幀里面requestAnimationFrame要做的事情很簡單，為當前時間的三個參數(shù)（時針、分針、秒針）添加增量，然后重新繪制時鐘。
根據(jù)一秒60幀的頻率，那么second在1幀里面的增量是：2*π / 60 / 60 = π / 1800；
minute在一幀里面的增量是second增量的60分之一；hour在一幀里面的增量是minute的12分之1。
另外：當hour、minute、second任一一個變量到達3/2*π后，意味著完成了一個周期，就要重新初始化為(-1/2)*π，否則會覆蓋繪制成一個圓。
由此得到：requestAnimationFrame()函數(shù)中，hour，minute，second的更新過程如下：
var s = Math.PI / 1800;
var m = s / 60;
var h = m / 12;
second = second + s;
minute = minute + m;
hour = hour + h;
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
if(minute >= Math.PI * (3/2)){
minute = Math.PI * (-1/2);
}
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}</span>
更新draw.js的完整代碼如下：
function draw() {
var canvas = document.getElementById('clock');
var currentTime = new Date();
var hour = (currentTime.getHours()%12) * Math.PI/6;
var minute = currentTime.getMinutes() * Math.PI/30;
var second = currentTime.getSeconds() * Math.PI/30;
hour = hour - Math.PI * (1/2);
minute = minute - Math.PI * (1/2);
second = second - Math.PI * (1/2);
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var s = Math.PI / 1800;
var m = s / 60;
var h = m / 12;
var rotate = requestAnimationFrame(step);
function step(){
second = second + s;
minute = minute + m;
hour = hour + h;
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
if(minute >= Math.PI * (3/2)){
minute = Math.PI * (-1/2);
}
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
ctx.clearRect(0, 0, 400 , 400);
ctx.beginPath();
ctx.arc(200,200,50,Math.PI*(-1/2),hour,false);
ctx.moveTo(200,100);
ctx.arc(200,200,100,Math.PI*(-1/2),minute,false);
ctx.moveTo(200,50);
ctx.arc(200,200,150,Math.PI*(-1/2),second,false);
ctx.stroke();
requestAnimationFrame(step);
}
}
}
到這步為止，我們已經(jīng)得到了一個會動的圓形時鐘，接下來，我們?yōu)槠涮砑由现羔槨?nbsp;
第四步*：添加時針、分針、秒針。
JS為我們提供了Math.cos() 、Math.sin() 計算指針到達的位置，它們所接收參數(shù)的單位也都是弧度。
function draw() {
var canvas = document.getElementById('clock');
var currentTime = new Date();
var hour = (currentTime.getHours()%12) * Math.PI/6;
var minute = currentTime.getMinutes() * Math.PI/30;
var second = currentTime.getSeconds() * Math.PI/30;
hour = hour - Math.PI * (1/2);
minute = minute - Math.PI * (1/2);
second = second - Math.PI * (1/2);
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var s = Math.PI / 1800;
var m = s / 60;
var h = m / 12;
var rotate = requestAnimationFrame(step);
function step(){
second = second + s;
minute = minute + m;
hour = hour + h;
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
if(minute >= Math.PI * (3/2)){
minute = Math.PI * (-1/2);
}
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
//秒針的終點
xs = 150 * Math.cos(second) + 200;
ys = 150 * Math.sin(second) + 200;
//分針的終點
xm = 100 * Math.cos(minute) + 200;
ym = 100 * Math.sin(minute) + 200;
//時針的終點
xh = 50 * Math.cos(hour) + 200;
yh = 50 * Math.sin(hour) + 200;
ctx.clearRect(0, 0, 400 , 400);
ctx.beginPath();
//繪制指針
ctx.moveTo(200,200);
ctx.lineTo(xs,ys);
ctx.moveTo(200,200);
ctx.lineTo(xm,ym);
ctx.moveTo(200,200);
ctx.lineTo(xh,yh);
//繪制圓形輪廓
ctx.moveTo(200,150);
ctx.arc(200,200,50,Math.PI*(-1/2),hour,false);
ctx.moveTo(200,100);
ctx.arc(200,200,100,Math.PI*(-1/2),minute,false);
ctx.moveTo(200,50);
ctx.arc(200,200,150,Math.PI*(-1/2),second,false);
ctx.stroke();
requestAnimationFrame(step);
}
}
}
嗯嗯，雖然指針是畫出來了，都是我略感后悔，因為感覺太丑了。從審美學(xué)角度而言，帶指針時鐘就應(yīng)該是個全圓輪廓的時鐘。不知道讀者有沒有同感。我決定在第五步中把第四步回退了。
第五步：個性化、美化、自定義你的時鐘。
html5的canvas畫布，提供了多種樣式屬性，如線條顏色、線條粗細等等。
為了提高代碼的可重用性，我們將畫圓的代碼抽象成一個函數(shù)。
function draw() {
var canvas = document.getElementById('clock');
var currentTime = new Date();
var hour = (currentTime.getHours()%12) * Math.PI/6;
var minute = currentTime.getMinutes() * Math.PI/30;
var second = currentTime.getSeconds() * Math.PI/30;
hour = hour - Math.PI * (1/2);
minute = minute - Math.PI * (1/2);
second = second - Math.PI * (1/2);
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var s = Math.PI / 1800;
var m = s / 60;
var h = m / 12;
var rotate = requestAnimationFrame(step);
function step(){
second = second + s;
minute = minute + m;
hour = hour + h;
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
if(minute >= Math.PI * (3/2)){
minute = Math.PI * (-1/2);
}
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
ctx.clearRect(0, 0, 400 , 400);
ctx.beginPath();
//繪制圓形輪廓
drawCircle(ctx, 100, hour, '#99ff00');
drawCircle(ctx, 120, minute, '#99ff66');
drawCircle(ctx, 140, second, '#66cc66');
requestAnimationFrame(step);
}
}
}
function drawCircle(ctx, radius ,endAngle, color){
ctx.beginPath();
ctx.moveTo(200,200-radius);
ctx.strokeStyle = color;
ctx.lineWidth = 20;
ctx.arc(200,200,radius,Math.PI*(-1/2),endAngle,false);
ctx.stroke();
}
第六步（后續(xù)添加）：為時鐘添加數(shù)字指數(shù)。
具體做法為多增加一個畫布canvas元素。既然我們已經(jīng)能從Date()中獲取時間，那么顯示數(shù)值的來源不成問題。讀者唯一需要知道的就是利用setInterval(thingstodo(),interval)方法來實現(xiàn)每秒更新一次指數(shù)。
修改后的canvas.html
<html>
<head>
<title>Canvas clock tutorial</title>
<style type="text/css">
canvas { border: 1px solid black; }
#display {position: absolute; top:8; left:8;}
</style>
<script src="draw.js" type="text/javascript"></script>
</head>
<body onload="draw();">
<canvas id="clock" width="400" height="400"></canvas>
<canvas id="display" width="400" height="400"></canvas>
</body>
</html>
修改后的draw.js
function draw() {
var canvas = document.getElementById('clock');
var displayCanvas = document.getElementById('display');
var currentTime = new Date();
var hour = (currentTime.getHours()%12) * Math.PI/6;
var minute = currentTime.getMinutes() * Math.PI/30;
var second = currentTime.getSeconds() * Math.PI/30;
hour = hour - Math.PI * (1/2);
minute = minute - Math.PI * (1/2);
second = second - Math.PI * (1/2);
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var ctxD = displayCanvas.getContext('2d');
showDisplay(ctxD, currentTime);
var s = Math.PI / 1800;
var m = s / 60;
var h = m / 12;
var rotate = requestAnimationFrame(step);
function step(){
second = second + s;
minute = minute + m;
hour = hour + h;
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
if(minute >= Math.PI * (3/2)){
minute = Math.PI * (-1/2);
}
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
ctx.clearRect(0, 0, 400 , 400);
ctx.beginPath();
//繪制圓形輪廓
drawCircle(ctx, 100, hour, '#99ff00');
drawCircle(ctx, 120, minute, '#99ff66');
drawCircle(ctx, 140, second, '#66cc66');
requestAnimationFrame(step);
}
}
}
function drawCircle(ctx, radius ,endAngle, color){
ctx.beginPath();
ctx.moveTo(200,200-radius);
ctx.strokeStyle = color;
ctx.lineWidth = 20;
ctx.arc(200,200,radius,Math.PI*(-1/2),endAngle,false);
ctx.stroke();
}
function showDisplay(ctx, date){
var h = date.getHours(),m = date.getMinutes(),s = date.getSeconds();
//計時文字樣式
ctx.font = "13px Sans-Serif";
ctx.textAlign = "center";
ctx.strokeText(h+":"+m+":"+s,200,200);
var timmer = setInterval(function(){
s++;
if(s>=60){
m++;
s=0;
}
if(m>=60){
h++;
m=0;
}
if(h>=24){
h=0;
}
ctx.clearRect(0,0,400,400);
ctx.strokeText(h+":"+m+":"+s,200,200);
},1000);
}
最終成果圖如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
![[分享]一個非常漂亮的進度滾動條](http://img.jbzj.com/images/xgimg/bcimg0.png)
[分享]一個非常漂亮的進度滾動條...2007-02-02
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)通訊錄列表展開收起，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
本文主要對Array和String方法進行總結(jié)，每一部分總結(jié)后有實例代碼，代碼中黃色框方法不改變原數(shù)組。PS:所有實例結(jié)果均一一運行所得。具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
Web層改進II-用xmlhttp 無聲息提交復(fù)雜表單
Web層改進II-用xmlhttp 無聲息提交復(fù)雜表單...2007-01-01
這篇文章主要介紹了es6中l(wèi)et和const的使用方法,結(jié)合實例形式詳細分析了es6中l(wèi)et和const的基本功能、原理、使用方法及操作注意事項,需要的朋友可以參考下2020-02-02
js之encodeURI、encodeURIComponent、decodeURI、decodeURIComponent
這篇文章主要介紹了js之encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
一旦你得到了表示窗口的變量，你就能通過各種方法來操縱它。下面介紹一下對窗口的各種操作2013-06-06
JavaScript 題型問答有答案參考，都是一些開發(fā)中容易碰到的問題。2010-02-02
簡單js代碼實現(xiàn)selece二級聯(lián)動(推薦)
這篇文章主要介紹了簡單js代碼實現(xiàn)selece二級聯(lián)動的簡單實例。需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了使用webpack4編譯并壓縮ES6代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04