1. 今天用canvas做了一個時鐘，想起之前用JS也做過一個，所以把兩個的代碼個貼上來。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{background:#000;}
#c1,span{background:#fff;}
</style>
<script>
window.onload=function(){
var oC=document.getElementById('c1');
var oGC=oC.getContext('2d');
function toDraw(){
var x=200;
var y=200;
var r=150;
var oDate = new Date();
var oHours = oDate.getHours();
var oMin = oDate.getMinutes();
var oSen = oDate.getSeconds();
var oHoursValue = (-90 + oHours*30 + oMin/2) * Math.PI/180;
var oMinValue = (-90 + oMin*6) * Math.PI/180;
var oSenValue = (-90 + oSen*6) * Math.PI/180;
//畫一個大圓分成60分
oGC.beginPath();
for(var i=0;i<60;i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
oGC.closePath();
oGC.stroke();
//切割多餘的部分
oGC.fillStyle='white';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*19/20,0,360*Math.PI/180,false);
oGC.fill();
//畫出整點的刻度
oGC.lineWidth=3
oGC.beginPath();
for(var i=0;i<12;i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
oGC.closePath();
oGC.stroke();
//切割多餘部分
oGC.fillStyle='white';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*18/20,0,360*Math.PI/180,false);
oGC.fill();
//指針交界的圓
oGC.fillStyle='#000';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*1/20,0,360*Math.PI/180,false);
oGC.closePath();
oGC.fill();
//畫時針
oGC.lineWidth = 5;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
oGC.closePath();
oGC.stroke();
//畫分針
oGC.lineWidth = 3;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);
oGC.closePath();
oGC.stroke();
//畫秒針
oGC.lineWidth = 1;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*18/20,oSenValue,oSenValue,false);
oGC.closePath();
oGC.stroke();
}
setInterval(toDraw,1000);
toDraw();
}
</script>
</head>
<body>
<canvas id='c1' width='400' height='400'>
<span>該瀏覽器不支持canvas</span>
</canvas>
</body>
</html>
3）以下則爲CSS3所做的鐘表代碼如下：
<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<script></script>
<style id="css">
#wrap{width:200px;height:200px;border:2px solid #000; margin:100px auto; border-radius:50%; position:relative;}
#wrap ul{margin:0;padding:0;height:200px; position:relative; list-style:none;}
#wrap ul li{ width:2px;height:6px;background:#000; position:absolute;left:99px;top:0; -moz-transform-origin:center 100px;}
/*#wrap ul li:nth-of-type(1){ -webkit-transform:rotate(0);}
#wrap ul li:nth-of-type(2){ -webkit-transform:rotate(6deg);}
#wrap ul li:nth-of-type(3){ -webkit-transform:rotate(12deg);}
#wrap ul li:nth-of-type(4){ -webkit-transform:rotate(18deg);}
#wrap ul li:nth-of-type(5){ -webkit-transform:rotate(24deg);}
#wrap ul li:nth-of-type(6){ -webkit-transform:rotate(30deg);}
#wrap ul li:nth-of-type(7){ -webkit-transform:rotate(36deg);}
#wrap ul li:nth-of-type(8){ -webkit-transform:rotate(42deg);}*/
#wrap ul li:nth-of-type(5n+1){ height:12px;}
#hour{width:6px;height:45px;background:#000; position:absolute;left:97px;top:55px;-moz-transform-origin:bottom;}
#min{width:4px;height:65px;background:#999; position:absolute;left:98px;top:35px;-moz-transform-origin:bottom;}
#sec{width:2px;height:80px;background:red; position:absolute;left:99px;top:20px;-moz-transform-origin:bottom;}
.ico{width:20px;height:20px;background:#000; border-radius:50%; position:absolute;left:90px;top:90px;}
</style>
</head>
<body>
<div id="wrap">
<ul id="list">
<!--<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>-->
</ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div class="ico"></div>
</div>
<script>
var oList=document.getElementById("list");
var oCss=document.getElementById("css");
var oHour=document.getElementById("hour");
var oMin=document.getElementById("min");
var oSec=document.getElementById("sec");
var aLi="";
var aCss="";
for(var i=0;i<60;i++)
{
aCss+="#wrap ul li:nth-of-type("+(i+1)+"){ -moz-transform:rotate("+i*6+"deg);}";
aLi+="<li></li>"
}
oList.innerHTML=aLi;
oCss.innerHTML+=aCss;
toTime();
setInterval(toTime,1000);
function toTime()
{
var oDate=new Date();
var iSec=oDate.getSeconds();
var iMin=oDate.getMinutes()+iSec/60;
var iHour=oDate.getHours()+iMin/60;
oSec.style.transform="rotate("+iSec*6+"deg)";
oMin.style.transform="rotate("+iMin*6+"deg)";
oHour.style.transform="rotate("+iHour*30+"deg)";
};
</script>
</body>
</html>
總結：用canvas的感覺就是鐘錶是畫上去的，比如說圓，線條等等。而用CSS3，則有拼湊的感覺，比如原型錶盤用了border-radius：50%才做出了一個圓等。但是不論用哪種方式實現，理解了原理，將之拆解。