js Canvas實(shí)現(xiàn)圓形時(shí)鐘教程

更新時(shí)間：2016年09月19日 17:18:04 作者：jakioneplus

這篇文章主要為大家詳細(xì)介紹了HTML5 Canvas實(shí)現(xiàn)圓形時(shí)鐘簡(jiǎn)易教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

閱讀本文需要一點(diǎn)關(guān)于canvas基本用法的基礎(chǔ)，本文實(shí)例為大家分享了HTML5 Canvas實(shí)現(xiàn)圓形時(shí)鐘簡(jiǎn)易教程

第一步：新建一個(gè)最簡(jiǎn)單的html文件，并且在<body>標(biāo)簽中定義元素canvas。

canvas.html

<html>
 <head>
 <title>Canvas clock tutorial</title>
 </head>
 <body>
 <canvas id="clock" width="400" height="400"></canvas>
 </body>
</html>

在這一步完成后，用瀏覽器打開(kāi)canvas.html，你會(huì)發(fā)現(xiàn)什么都看不到，這是因?yàn)槲覀儧](méi)有在canvas上繪制任何東西，同時(shí)也沒(méi)有為其定義邊界。

在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>的輪廓。

當(dāng)沒(méi)有設(shè)置寬度和高度的時(shí)候，canvas會(huì)初始化寬度為300像素和高度為150像素。該元素可以使用CSS來(lái)定義大小，但在繪制時(shí)圖像會(huì)伸縮以適應(yīng)它的框架尺寸：如果CSS的尺寸與初始畫(huà)布的比例不一致，它會(huì)出現(xiàn)扭曲。

注意: 如果你繪制出來(lái)的圖像是扭曲的, 嘗試在<canvas>的屬性中明確規(guī)定寬和高，而不是使用CSS。

第二步：新建實(shí)現(xiàn)繪制圓形時(shí)鐘邏輯的draw.js文件，進(jìn)行初始化工作。

毫無(wú)疑問(wèn)，要實(shí)現(xiàn)時(shí)鐘，就需要獲取系統(tǒng)時(shí)間。

在js語(yǔ)法中，可以利用Date()來(lái)實(shí)時(shí)獲取時(shí)間。
var currentTime = new Date();

隨后，要掌握的是canvas繪制圓形的函數(shù)：
arc(x, y, radius, startAngle, endAngle, anticlockwise)該方法表示畫(huà)一個(gè)以（x,y）為圓心的、以radius為半徑的圓?。▓A），從startAngle開(kāi)始到endAngle結(jié)束，按照anticlockwise給定的方向（默認(rèn)順時(shí)針（true））來(lái)生成。
其中stratAngle和endAngle的單位并不是我們所熟悉的角度單位，而是弧度單位。一個(gè)完整的圓跨弧度2π。

在canvas的坐標(biāo)系中，是以x軸正方向所在的方向?yàn)?弧度。時(shí)鐘指針按順時(shí)針?lè)较蜣D(zhuǎn)，以2π為一個(gè)周期，因此如下圖所示，時(shí)鐘指針，是從(-1/2)*π位置開(kāi)始走的。

當(dāng)前時(shí)間的弧度計(jì)算方式如下：

 //將一個(gè)時(shí)鐘周期12等分，對(duì)12求余是因?yàn)镈ate().getHours將返回24小時(shí)制的小時(shí)。
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中時(shí)鐘圓從(-1/2)*π開(kāi)始走，因此我們還需要給它們加上(-1/2)*π的起始偏移量。

初步得到draw.js:

function draw() {
 //canvas繪畫(huà)的前提工作
 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();
 }
}

同時(shí)在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>

在完成了第二步之后，我們可以看到一個(gè)當(dāng)前時(shí)間的圓形時(shí)鐘輪廓。那么接下來(lái)，就是讓它動(dòng)起來(lái)！

第三步：使用requestAnimationFrame()方法讓時(shí)鐘動(dòng)起來(lái)。

requestAnimationFrame()的執(zhí)行頻率是1秒60幀，用戶(hù)可以在requestAnimationFrame定義事件，使其在每一幀中重復(fù)、迭代完成相應(yīng)的事件。

在我們這個(gè)案例中，每一幀里面requestAnimationFrame要做的事情很簡(jiǎn)單，為當(dāng)前時(shí)間的三個(gè)參數(shù)（時(shí)針、分針、秒針）添加增量，然后重新繪制時(shí)鐘。

根據(jù)一秒60幀的頻率，那么second在1幀里面的增量是：2*π / 60 / 60 = π / 1800；

minute在一幀里面的增量是second增量的60分之一；hour在一幀里面的增量是minute的12分之1。

另外：當(dāng)hour、minute、second任一一個(gè)變量到達(dá)3/2*π后，意味著完成了一個(gè)周期，就要重新初始化為(-1/2)*π，否則會(huì)覆蓋繪制成一個(gè)圓。

由此得到：requestAnimationFrame()函數(shù)中，hour，minute，second的更新過(guò)程如下：

  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)得到了一個(gè)會(huì)動(dòng)的圓形時(shí)鐘，接下來(lái)，我們?yōu)槠涮砑由现羔槨?nbsp;

第四步*：添加時(shí)針、分針、秒針。

JS為我們提供了Math.cos() 、Math.sin() 計(jì)算指針到達(dá)的位置，它們所接收參數(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);
  }
  //秒針的終點(diǎn)
  xs = 150 * Math.cos(second) + 200;
  ys = 150 * Math.sin(second) + 200;
  //分針的終點(diǎn)
  xm = 100 * Math.cos(minute) + 200;
  ym = 100 * Math.sin(minute) + 200;
  //時(shí)針的終點(diǎn)
  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);
 }
 }
}

嗯嗯，雖然指針是畫(huà)出來(lái)了，都是我略感后悔，因?yàn)楦杏X(jué)太丑了。從審美學(xué)角度而言，帶指針時(shí)鐘就應(yīng)該是個(gè)全圓輪廓的時(shí)鐘。不知道讀者有沒(méi)有同感。我決定在第五步中把第四步回退了。

第五步：個(gè)性化、美化、自定義你的時(shí)鐘。

html5的canvas畫(huà)布，提供了多種樣式屬性，如線條顏色、線條粗細(xì)等等。

為了提高代碼的可重用性，我們將畫(huà)圓的代碼抽象成一個(gè)函數(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ù)字指數(shù)。

具體做法為多增加一個(gè)畫(huà)布canvas元素。既然我們已經(jīng)能從Date()中獲取時(shí)間，那么顯示數(shù)值的來(lái)源不成問(wèn)題。讀者唯一需要知道的就是利用setInterval(thingstodo(),interval)方法來(lái)實(shí)現(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();
 //計(jì)時(shí)文字樣式
 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);
}

最終成果圖如下：