canvas是html5中新增的元素，可用來在網頁上來繪製圖像，既然可以用於畫圖，那麼自然可以來畫一個環形的時鐘，所以，接下來的這篇文章將給大家來分享關於如何利用canvas繪製環形時鐘的方法。
首先我們要知道的是環形時鐘的組成形狀是畫一個圓還有刻度，然後還有時針分針秒針，然後就是用定時器讓針動起來。
然後我們就根據環形時鐘的組成來利用canvas繪製出時鐘。
我們先來看看畫環形時鐘所需的函數。
1、圓形：canvas.arc(x,y,r,0,2*Math.PI);
2、 圓角的線條：canvas.lineCap = "round";
3、文字：canvas.font、canvas.textBaseline、canvas.textAlign;/
4、擦除：canvas.clearRect(x,y,w,h) 。
知道了繪製環形時鐘所需的基本函數與組成後，我們就繼續來說關於canvas繪製環形時鐘的步驟。
一、先繪製需要在文件載入完成後開始，setInterval()實作幀動畫，這裡和寫canvas小遊戲的套路是一樣的，以一定速度重複繪製-擦除。
程式碼如下：
<canvas id="canvas" width="300px" height="300px">您的浏览器不支持canvas</canvas>
登入後複製
// 加载后开始
document.body.onload = start;
function start(){
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var r = width/2; //半径
function render(){
/*
画钟表静态的元件
*/
}
function drawGuid(){
/*
画钟表指针
*/
var now = new Date();
h = now.getHours();
m =now.getMinutes();
s = now.getSeconds();
drawHour(h,m);
drawMinute(m,s);
drawSecond(s);
}
setInterval(function(){
render();
drawGuid();
},30/1000)
}登入後複製
說明：每一幀都先用canvas.clearRect(x,y,w,h)擦掉畫布上的像素，否則會造成目前像素和之前的像素疊加的問題。將畫布的原點移到畫布的中心，有助於繪製刻度和以中心為基點旋轉的指針，在之前得保存平移之前的環境狀態。
二、 每隔6度角畫一個刻度，每隔30度畫一個大刻度，因為原點被移到中心，利用JavaScript自帶的函數（Math.sin(deg)、 Math.cos(deg)）得到刻度的x、y座標，注意將角度轉換為弧度。
程式碼如下：
function render(){
cxt.clearRect(0,0,width,height);
cxt.save();
cxt.translate(width/2,height/2);
// 画轮廓
cxt.beginPath();
cxt.lineWidth = r*0.05;//轮廓圆宽度
cxt.strokeStyle = "#333";//轮廓圆颜色
cxt.arc(0,0,r-r*0.05,0,2*Math.PI); //圆
cxt.stroke();
cxt.closePath();
// 画内圆
cxt.beginPath();
cxt.lineWidth = 1;
var radi2 = r*0.85; //半径
cxt.arc(0,0,radi2,0,2*Math.PI); //圆
cxt.stroke();
cxt.closePath();
// 画刻度 使用Math.sin(deg)、Math.cos(deg)来计算圆上点的坐标
// 每隔6度画一个点
var hour = [6,5,4,3,2,1,12,11,10,9,8,7],i = 0;
for(var deg = 0;deg<360;deg=deg+6){
var spotX = radi2*Math.sin(deg*2*Math.PI/360);
var spotY = radi2*Math.cos(deg*2*Math.PI/360);
var spot = r*0.02; //刻度半径
cxt.beginPath();
cxt.fillStyle = "#ccc";
if(deg%30==0){
cxt.fillStyle = "#333";
spot = r*0.025;
var textX =(radi2*0.85)*Math.sin(deg*2*Math.PI/360); //文字x坐标
var textY =(radi2*0.85)*Math.cos(deg*2*Math.PI/360); //文字y坐标
cxt.font = r*0.1 + "px Arial";
cxt.textBaseline = "middle";// 文字垂直对齐方式
cxt.textAlign = "center"; // 文字水平对齐方式
cxt.fillText(hour[i],textX,textY);
i++;
}
cxt.arc(spotX,spotY,spot,0,2*Math.PI);
cxt.fill();
cxt.closePath();
}
// 画中心
cxt.beginPath();
cxt.arc(0,0,r*0.05,0,2*Math.PI);
cxt.stroke();
cxt.closePath();
}登入後複製
#三、時針、分針、秒針的做法是一致的，使用canvas.rotate()繞原點旋轉，旋轉前都要canvas .save()保存當前狀態（指針的每一幀動作都是讓畫布旋轉特定的角度，所以畫完一次要擺正一次畫布，否則秒針旋轉一次，分針會在此基礎上旋轉）。
程式碼如下：
function drawHour(h,m){
// 时针
h = h + m/60;
cxt.save();
cxt.beginPath();
cxt.rotate(2*Math.PI/12*h);
cxt.lineWidth = r*0.05;
cxt.lineCap = "round";
cxt.moveTo(0,r*0.4*0.2);
cxt.lineTo(0,-r*0.4*0.8);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
function drawMinute(m,s){
// 分针
m = m + s/60;
cxt.save();
cxt.beginPath();
cxt.rotate(2*Math.PI/60*m);
cxt.lineWidth = 3;
cxt.lineCap = "round";
cxt.moveTo(0,r*0.6*0.2);
cxt.lineTo(0,-r*0.6*0.8);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
function drawSecond(s){
// 秒针
cxt.save();
cxt.beginPath();
cxt.rotate(2*Math.PI/60*s);
cxt.strokeStyle = "#ff004f";
cxt.lineWidth = 1;
cxt.lineCap = "round";
cxt.moveTo(0,r*0.8*0.2);
cxt.lineTo(0,-r*0.8*0.8);
cxt.stroke();
cxt.closePath();
cxt.restore();
}登入後複製
注意：canvas.save()儲存目前的畫布狀態到堆疊裡，canvas.restore()取出堆疊裡儲存的狀態，屬於先進後出，所以canvas.restore()取的是最近一次的存檔。
四、繪製一次要呼叫之前儲存過的環境。
程式碼如下：
setInterval(function(){
render();
drawGuid();
cxt.restore();
},30/1000)登入後複製
最後關於canvas中更多的內容可以參考HTML5開發手冊。
以上是canvas如何繪製時鐘？ canvas畫環形時鐘的實作過程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
