html:
<canvas id="canvas"></canvas>
js:
window.onload=function(){
? ? ? ? ? ?beginTime();
? ? ? ? ? ? setInterval(beginTime,1000);
}
function beginTime(){
? ? ? ? ? ? var oDate = new Date();//獲取當(dāng)前時間
? ? ? ? ? ? var oHours = oDate.getHours();//定義時
? ? ? ? ? ? var oMin = oDate.getMinutes();//定義分
? ? ? ? ? ? ?var oSen = oDate.getSeconds();//定義秒
? ? ? ? ? ? ? var oHoursValue=(-90+oHours*30)*Math.PI/180;//把時轉(zhuǎn)換成弧度
? ? ? ? ? ? ? ?var oMinValue=(-90+oMin*6)*Math.PI/180;//把分轉(zhuǎn)換成弧度
? ? ? ? ? ? ? ? var oSenValue=(-90+oSen*6)*Math.PI/180;//把秒轉(zhuǎn)換成弧度
? ? ? ? ? ? ? ? // alert(1);
? ? ? ? ? ? ? ? ?// 創(chuàng)建一個圓形：x,y圓心的坐標(biāo)，r半徑，startAngle起點的弧度，endAngle終點的弧度，是順時針旋轉(zhuǎn)還是逆時針
? ? ? ? ? ? ? ? ?// context.act(x,y,r,startAngle,endAngle,false);
? ? ? ? ? ? ? ? ?var x = 200;
? ? ? ? ? ? ? ? ? var y = 200;
? ? ? ? ? ? ? ? ? ?var r = 150;
? ? ? ? ? ? ? ? ? ?var canvas = document.getElementById("canvas");//獲取canvas的對象
? ? ? ? ? ? ? ? ? ?var context = canvas.getContext("2d");//設(shè)置環(huán)境
? ? ? ? ? ? ? ? ? ? canvas.width=500;//定義寬度
? ? ? ? ? ? ? ? ? ? canvas.height=500;//定義高度
? ? ? ? ? ? ? ? ? ? context.clearRect(0,0,canvas.width,canvas.height);//清除
? ? ? ? ? ? ? ? // 1：畫分鐘點
? ? ? ? ? ? ? ? context.beginPath();//開始
? ? ? ? ? ? ? ? for(var i=0; i<60;i++){
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 開始一條路徑，移動到位置 0,0
? ? ? ? ? ? ? ? ? ? ? ? ? ? context.moveTo(x,y);
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 創(chuàng)建一個圓形：
? ? ? ? ? ? ? ? ? ? ? ? ? ? context.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?context.closePath();//結(jié)束
? ? ? ? ? ? ? ? ? ?context.stroke();
? ? ? ? ? ? ? ? ? ?context.fillStyle = '#fff';
? ? ? ? ? ? ? ? ? ? context.beginPath();//開始
? ? ? ? ? ? ? ? ? ? context.moveTo(x,y);
? ? ? ? ? ? ? ? ? ? context.arc(x,y,r*19/20,0,360*Math.PI/180,false);
? ? ? ? ? ? ? ? ? ? ?context.closePath();//結(jié)束
? ? ? ? ? ? ? ? ? ? ? context.fill();
? ? ? ? ? ? ? ? //2： 時針點
? ? ? ? ? ? ? ? ? ? context.beginPath();//開始
? ? ? ? ? ? ? ? ? ? context.lineWidth=3;
? ? ? ? ? ? ? ? ? ? for(var i=0; i< 12;i++){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?context.moveTo(x,y);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?context.arc(x,y,r,30*i*Math.PI/180,30*(i + 1)*Math.PI/180,false);
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?context.closePath();//結(jié)束
? ? ? ? ? ? ? ? ? ? context.stroke();
? ? ? ? ? ? ? ? ? ? ?context.fillStyle = '#fff';
? ? ? ? ? ? ? ? ? ? ? ?context.beginPath();//開始
? ? ? ? ? ? ? ? ? ? ? context.moveTo(x,y);
? ? ? ? ? ? ? ? ? ? ?context.arc(x,y,r*18/20,0,360*Math.PI/180,false);
? ? ? ? ? ? ? ? ? ? ? context.closePath();//結(jié)束
? ? ? ? ? ? ? ? ? ? ? context.fill();
// 畫時針
context.lineWidth = 5;
context.beginPath();
context.moveTo(x,y);
context.arc(x,y,r*11/20,oHoursValue,oHoursValue,false);
context.closePath();//結(jié)束
context.stroke();
// 畫分針
context.lineWidth = 3;
context.beginPath();
context.moveTo(x,y);
context.arc(x,y,r*15/20,oMinValue,oMinValue,false);
context.closePath();//結(jié)束
context.stroke();
// 畫秒針
context.lineWidth = 1;
context.beginPath();
context.moveTo(x,y);
context.arc(x,y,r*17/20,oSenValue,oSenValue,false);
context.closePath();//結(jié)束
context.stroke();
}
