<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
setInterval(Composite,1000);
}
function Composite(){
var canvas = document.getElementById("canvas");
if(canvas==null)
return false;
var context = canvas.getContext("2d");
context.clearRect(0,0,canvas.width,canvas.height);
context.save();
var myDate = new Date();
var hour = myDate.getHours()>=12?myDate.getHours()-12:myDate.getHours();
var minute = myDate.getMinutes();
var second = myDate.getSeconds();
var year = myDate.getFullYear(); //獲取完整的年份(4位,1970-????)
var month = myDate.getMonth()+1<10?"0"+(myDate.getMonth()+1):myDate.getMonth()+1; //獲取當前月份(0-11,0代表1月)（要加1）
var date = myDate.getDate()<10?"0"+myDate.getDate():myDate.getDate(); //獲取當前日(1-31)
var week = myDate.getDay(); // 獲取當前星期X(0-6,0代表星期天)
switch(week){
case 0:week = "星期日";break;
case 1:week = "星期一";break;
case 2:week = "星期二";break;
case 3:week = "星期三";break;
case 4:week = "星期四";break;
case 5:week = "星期五";break;
case 6:week = "星期六";break;
}
var hour1 = myDate.getHours()<10?"0"+myDate.getHours():myDate.getHours(); //獲取當前小時數(0-23)
var minute1 = myDate.getMinutes()<10?"0"+myDate.getMinutes():myDate.getMinutes(); // 獲取當前分鐘數(0-59)
var second1 = myDate.getSeconds()<10?"0"+myDate.getSeconds():myDate.getSeconds(); //獲取當前秒數(0-59)
var s = year+"年"+month+"月"+date+"日 "+week+hour1+":"+minute1+":"+second1;
document.getElementById("tt").innerHTML = s;
//設置圓形
context.beginPath();
context.fillStyle="lightblue";
context.arc(150,150,100,0,Math.PI*2,false);
context.fill();
context.closePath();
//設置秒針
context.beginPath();
context.strokeStyle = "red";
context.moveTo(150,150);
var secondhu = second/60*2*Math.PI;
context.lineTo(Math.sin(secondhu)*90+150,-Math.cos(secondhu)*90+150);
context.lineWidth="1";
context.closePath();
context.stroke();
//設置分針
context.beginPath();
context.strokeStyle = "blue";
context.moveTo(150,150);
var secondhu = (minute+second/60)/60*2*Math.PI;
context.lineTo(Math.sin(secondhu)*70+150,-Math.cos(secondhu)*70+150);
context.lineWidth="3";
context.closePath();
context.stroke();
//設置時針
context.beginPath();
context.strokeStyle = "black";
context.moveTo(150,150);
var secondhu = (hour+minute/60)/12*2*Math.PI;
context.lineTo(Math.sin(secondhu)*60+150,-Math.cos(secondhu)*60+150);
context.lineWidth="5";
context.closePath();
context.stroke();
//設置數字
context.font="bold 20px sans-serif";
context.fillStyle="black";
for(var i=1;i<=12;i++){
var txt = i;
var txthu = i/12*2*Math.PI;
context.fillText(txt,Math.sin(txthu)*85+141,-Math.cos(txthu)*85+155);
}
context.restore;
}
</script>
</head>
<body onLoad="draw()">
<h1>canvas元素示例</h1>
<div id="tt"></div>
<canvas id="canvas" width="400" height="300"/>
</body>
</html>