<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="600" height="600"></canvas>
</body>
<script type="text/javascript">
c = document.getElementById("mycanvas");
ctx = c.getContext("2d");
function toDraw(){
var x = 300;
var y = 300;
var r = 200;
//清除画布
ctx.clearRect(0,0,ctx.width,ctx.height);
//获取时间
var oDate = new Date();
var oHours = oDate.getHours();
var oMin = oDate.getMinutes();
var oSec = oDate.getSeconds();
var oHourDeg = (-90+(oHours+oMin/60)*30 )*Math.PI/180;
var oMinDeg = (-90+(oMin+oSec/60)*6)*Math.PI/180;
var oSecDeg = (-90+oSec*6)*Math.PI/180;
// 绘制大圆
ctx.beginPath();
for(var i=0;i<60;i++){
ctx.moveTo(x,y);
ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
ctx.closePath();
ctx.stroke();
//绘制白板遮住线条留下60个刻度
ctx.beginPath();
ctx.fillStyle = "white";
ctx.moveTo(x,y);
ctx.arc(x,y,r*19/20,0,2*Math.PI,false);
ctx.closePath();
ctx.fill();
//绘制刻度线
ctx.lineWidth = 3;
ctx.beginPath();
for(var i=0;i<12;i++){
ctx.moveTo(x,y);
ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
ctx.closePath();
ctx.stroke();
//绘制白板遮住线条留下12个刻度
ctx.beginPath();
ctx.fillStyle = "white";
ctx.moveTo(x,y);
ctx.arc(x,y,r*18/20,0,2*Math.PI,false);
ctx.closePath();
ctx.fill();
//绘制时针
ctx.lineWidth = 5;
// ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*1/2,oHourDeg,oHourDeg,false);
ctx.closePath();
ctx.stroke();
//绘制分针
ctx.lineWidth = 3;
// ctx.strokeStyle = "blue";
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*2/3,oMinDeg,oMinDeg,false);
ctx.closePath();
ctx.stroke();
//绘制秒针
ctx.lineWidth = 2;
// ctx.strokeStyle = "green";
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*8/9,oSecDeg,oSecDeg,false);
ctx.closePath();
ctx.stroke();
}
toDraw();
setInterval(function(){
toDraw();
},1000)
</script>
</html>
canvas绘制时钟
最新推荐文章于 2023-10-26 08:47:56 发布