H5實現的時鐘

時間 2019-11-24
標籤 h5 實現時鐘简体版
原文原文鏈接
源碼以下:html
<!doctype html>
<html>
<head></head>
<body>
<canvas id="clock" width="500" height="500">
您的瀏覽器不支持canvas標籤

，沒法看到時鐘
</canvas>
<script>
var clock=document.getElementById('clock');
var cxt=clock.getContext('2d');

function drawClock(){
//清除畫布
cxt.clearRect(0,0,500,500);
var now =new Date();
var sec=now.getSeconds();
var min=now.getMinutes();
var hour=now.getHours();
//小時必須獲取浮點類型(小時+分數轉化成的小時)
hour=hour+min/60;
//問題 19:23:30
//將24小時進制轉換爲12小時
hour=hour>12?hour-12:hour;

//錶盤(藍色)
cxt.lineWidth=10;
cxt.strokeStyle="blue";
cxt.beginPath();
cxt.arc(250,250,200,0,360,false);
cxt.closePath();
cxt.stroke();
//刻度
//時刻度
for(var i=0;i<12;i++){
cxt.save();
//設置時針的粗細
cxt.lineWidth=7;
//設置時針的顏色
cxt.strokeStyle="#000";
//先設置0,0點
cxt.translate(250,250);
//再設置旋轉角度
cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}

//分刻度
for(var i=0;i<60;i++){
cxt.save();
//設置分刻度的粗細
cxt.lineWidth=5;
//設置顏色(使用時刻度的顏色)
cxt.strokeStyle="#000";
//設置或者重置畫布的0，0點
cxt.translate(250,250);
//設置旋轉角度
cxt.rotate

(i*6*Math.PI/180);
//畫分針刻度
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}

//時針
cxt.save();
//設置時針風格
cxt.lineWidth=7;
//設置時針的顏色
cxt.strokeStyle="#000";
//設置異次元空間的0，0點
cxt.translate(250,250);
//設置旋轉角度
cxt.rotate

(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();


//分針
cxt.save();
//設置分針的風格
cxt.lineWidth=5;
cxt.strokeStyle="#000";
//設置異次元空間分針畫布的圓心
cxt.translate(250,250);
//設置旋轉角度
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke();
cxt.restore();


//秒針

cxt.save();
//設置秒針的風格
//顏色紅色
cxt.strokeStyle="red";
//粗細 3像素
cxt.lineWidth=3;
//重置0，0點
cxt.translate(250,250);
//設置旋轉角度
cxt.rotate

(sec*6*Math.PI/180);
//畫圖
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
//畫出時針、分針、秒針的交叉點、
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
cxt.closePath();
//設置填充樣式
cxt.fillStyle="gray";
cxt.fill();
//設置筆觸樣式(秒針已設置)
cxt.stroke();
//設置秒針前段的小圓點
cxt.beginPath();
cxt.arc(0,-150,5,0,360,false);
cxt.closePath();
//設置填充樣式
cxt.fillStyle="gray";
cxt.fill();
//設置筆觸樣式(秒針已設置)
cxt.stroke();

cxt.restore();
}
//使用setInterval(代碼,毫秒時間) 讓時鐘動起來
drawClock();
setInterval

(drawClock,1000);
</script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。