最近閒下來，開始了HTML5的入門之旅。跟着某視頻(避免廣告嫌疑)做了兩個簡單的canvas例子。此處爲簡易時鐘實例。
PS: 例子爲實驗性例子，歡迎批判~~~~
一、實現邏輯
1、先畫出錶盤：最外端的圓、時刻度、分秒刻度
2、使用canvas的畫布旋轉，分別畫出時針、分針、秒針(含秒針外端圓點)
3、定時清空畫布，並重新繪製時針。
二、代碼展示
1、效果圖
2、以下爲代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title> Canvas-時鐘 </title>
</head>
<body>
<canvas width="500" height="500" id="clock" >您的瀏覽器不支持<code>canvas</code>標籤！</canvas>
<script>
//獲取畫布DOM
var dCanvas = document.getElementById('clock');
//設置繪圖環境.注意只能用小寫“2d”
var paper = dCanvas.getContext('2d');
var CX=250,CY=250;
//畫表盆(藍色)
clockHandler();
window.setInterval(clockHandler,1000);
function drawClockBg(_paper){
_paper.lineWidth=10;
_paper.strokeStyle="blue";
_paper.beginPath();
_paper.arc(CX,CY,200,0,360,false);//最後一個參數，表示是否順時針畫
_paper.stroke();
_paper.closePath();
};
/**
* 畫時針刻度
*
**/
function drawClockHour(_paper){
for(var i=0;i<12;i++){
_paper.save();
_paper.strokeStyle="black";
_paper.translate(CX,CY);
_paper.rotate(i*30*Math.PI/180);
_paper.beginPath();
_paper.moveTo(0,-175);
_paper.lineTo(0,-195);
_paper.stroke();
_paper.closePath();
_paper.restore();
}
};
/**
* 畫秒/分刻度
*
**/
function drawClockSecond(_paper){
for(var i=0;i<60;i++){
if(i%5===0)continue;
_paper.save();
_paper.lineWidth=4;
_paper.strokeStyle="black";
_paper.translate(CX,CY);
_paper.rotate(i*6*Math.PI/180);
_paper.beginPath();
_paper.moveTo(0,-185);
_paper.lineTo(0,-195);
_paper.stroke();
_paper.closePath();
_paper.restore();
}
};
/**
* 畫時針
**/
function drawClockHourLine(_paper,_hour){
_paper.save();
_paper.lineWidth=10;
_paper.strokeStyle="black";
_paper.translate(CX,CY);
_paper.rotate(_hour*30*Math.PI/180);
_paper.beginPath();
_paper.moveTo(0,-85);
_paper.lineTo(0,5);
_paper.stroke();
_paper.closePath();
_paper.restore();
};
/**
* 畫分針
**/
function drawClockMinuteLine(_paper,_minute){
_paper.save();
_paper.lineWidth=6;
_paper.strokeStyle="black";
_paper.translate(CX,CY);
_paper.rotate(_minute*6*Math.PI/180);
_paper.beginPath();
_paper.moveTo(0,-125);
_paper.lineTo(0,10);
_paper.stroke();
_paper.closePath();
_paper.restore();
};
/**
* 畫秒針
**/
function drawClockSecondLine(_paper,_second){
_paper.save();
_paper.lineWidth=3;
_paper.strokeStyle="red";
_paper.translate(CX,CY);
_paper.rotate(_second*6*Math.PI/180);
//秒針線
_paper.beginPath();
_paper.moveTo(0,-185);
_paper.lineTo(0,15);
_paper.stroke();
_paper.closePath();
//初始化秒針圓點
drawBaseCircle(_paper,0,-160,"yellow");
_paper.restore();
};
/**
* 畫圓點 錶盤圓點、秒針外端圓點
**/
function drawBaseCircle(_paper, _x, _y , fs){
if(typeof fs == 'undefined') fs = "gray";
_paper.beginPath();
_paper.fillStyle=fs;
_paper.arc(_x,_y,5,0,360,false);
_paper.fill();
_paper.closePath();
}
/**
* 定時處理時鐘指針
**/
function clockHandler(){
//清空已畫的內容
paper.clearRect(0,0,500,500);
//畫表盆(藍色)
drawClockBg(paper);
//畫時刻度
drawClockHour(paper);
//畫秒刻度
drawClockSecond(paper);
//初始化時間
var nowDate = new Date();
//獲取當前時間的小時數
var hour = (nowDate.getHours()%12) + parseFloat(nowDate.getMinutes()/60,2);
//獲取當前時間的分鐘數
var minute = nowDate.getMinutes() + parseFloat(nowDate.getSeconds()/60,2);
//獲取當前時間的秒數
var second = nowDate.getSeconds();
//初始化時針
drawClockHourLine(paper,hour);
//初始化分針
drawClockMinuteLine(paper,minute);
//初始化秒針
drawClockSecondLine(paper,second);
//初始化中心圓點
drawBaseCircle(paper,CX,CY);
};
</script>
</body>
</html>
三、後記
1、代碼在FireFox 32.0.3上，測試無誤！