神奇的canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#container{
width: 200px;
height: 200px;
border:1px solid #000;
margin:50px auto;
border-radius: 50%;
position: relative;
}
#container li{
width: 2px;
height: 4px;
background: #000000;
position: absolute;
left:50%;
margin-left: -1px;
top:0;
-webkit-transform-origin: 1px 100px;/*起始點 會根據父元素旋轉*/
}
#container li:nth-child(5n+1){ /*從第一個開始 每五個刻度長爲8px*/
height: 8px;
}
#hour{
width: 6px;
height: 35px;
background: #000000;
position: absolute;
left:97px;
top:65px;
-webkit-transform-origin: 3px 35px;/*起始點*/
}
#minute{
width: 4px;
height: 45px;
background: green;
position: absolute;
left:98px;
top:55px;
-webkit-transform-origin: 2px 45px;
}
#second{
width: 2px;
height: 55px;
background: red;
position: absolute;
left:99px;
top:45px;
-webkit-transform-origin: 1px 55px;
}
</style>
</head>
<body>
<div id="container">
<ul>
</ul>
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<script>
var oUl = document.getElementsByTagName('ul')[0];//getElementsByTagName取到的是數組 [0]取到第一個
var oHour = document.getElementById('hour');
var oMinute = document.getElementById('minute');
var oSecond = document.getElementById('second');
var sLi = ''; //定義一個字符串 存li
for(var i=0; i<60; i++){ //循環產生六十個li
// sLi += '<li style="-webkit-transform: rotate('+i*6+'deg)"></li>';
sLi += `<li style="-webkit-transform: rotate(${i*6}deg)"></li>`; //拼接字符串
}
oUl.innerHTML = sLi; //添加到ul內容裏
function run(){
var date = new Date(); //new日期對象
var hour = date.getHours(); //獲取時間
var minute = date.getMinutes();
var second = date.getSeconds();
oHour.style.webkitTransform = 'rotate('+(hour*30+minute*0.5)+'deg)'; /*每小時時針轉30度 一小時六十分鐘 所以每分鐘時針轉0.5度*/
oMinute.style.webkitTransform = 'rotate('+(minute+second/60)*6+'deg)';/*每分鐘分針轉6度 一分鐘六十秒 所以每秒分針轉0.1度*/
oSecond.style.webkitTransform = 'rotate('+second*6+'deg)';/*每秒秒針轉六度*/
}
run();
setInterval(function(){ /*定時器 一秒鐘執行一次 模仿clock*/
run();
},1000);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="cvs" width="600" height="600"></canvas>
<script>
var oCanvas=document.getElementById('cvs');
var oCtx=oCanvas.getContext('2d');
oCtx.beginPath();
for(i=0;i<60;i++){
oCtx.moveTo(300,300);
oCtx.arc(300,300,100,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);
}
oCtx.stroke();
oCtx.closePath();
//第一個圓
oCtx.beginPath();
oCtx.arc(300,300,95,0*Math.PI,2*Math.PI,false);
oCtx.fillStyle="#fff";
oCtx.fill();
oCtx.closePath();
oCtx.beginPath();
for(i=0;i<12;i++){
oCtx.moveTo(300,300);
// oCtx.arc(300,300,100,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false);
oCtx.arc(300,300,95,i*30*Math.PI/180,i*30*Math.PI/180,false);/*不重新畫一個圓 從當前弧度到當前弧度*/
}
oCtx.stroke();
oCtx.closePath();
//第二個圓
oCtx.beginPath();
oCtx.arc(300,300,90,0*Math.PI,2*Math.PI,false);
oCtx.fillStyle="#fff";
oCtx.fill();
oCtx.closePath();
run();
setInterval(function(){
run();
},1000)
function run() {
oCtx.clearRect(230,230,140,140);
var oDate = new Date;
var iSeconds = oDate.getSeconds();
var iMinutes = oDate.getMinutes() + iSeconds/60;
var iHours = oDate.getHours() + iMinutes/60;
//時針
oCtx.beginPath();
oCtx.moveTo(300,300);
oCtx.lineWidth=5;
oCtx.strokeStyle="green";
oCtx.arc(300,300,40,iHours*30*Math.PI/180,iHours*30*Math.PI/180,false);/*不重新畫一個圓 從當前弧度到當前弧度*/
oCtx.stroke();
oCtx.closePath();
//分針
oCtx.beginPath();
oCtx.moveTo(300,300);
oCtx.lineWidth=3;
oCtx.strokeStyle="black";
oCtx.arc(300,300,55,iMinutes*6*Math.PI/180,iMinutes*6*Math.PI/180,false);/*不重新畫一個圓 從當前弧度到當前弧度*/
oCtx.stroke();
oCtx.closePath();
//秒針
oCtx.beginPath();
oCtx.moveTo(300,300);
oCtx.lineWidth=2;
oCtx.strokeStyle="red";
oCtx.arc(300,300,70,iSeconds*6*Math.PI/180,iSeconds*6*Math.PI/180,false);/*不重新畫一個圓 從當前弧度到當前弧度*/
oCtx.stroke();
oCtx.closePath();
}
</script>
</body>
</html>