首页 > 代码库 > Html5 - canvas - 时钟
Html5 - canvas - 时钟
<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas id="clock" width="500" height="500"></canvas>
<script>
var clock = document.getElementById("clock");
var ctx = clock.getContext("2d");
function drawClock(){
//清除画布
ctx.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 ;
//将二十四小时进制转换为12小时进制
if(hour > 12){
hour -= 12 ;
}
// 表盘
ctx.lineWidth = 10 ;
ctx.strokeStyle = "blue"
ctx.beginPath();
ctx.arc(250,250,200,0,360,false);
ctx.closePath();
ctx.stroke();
// 刻度 时刻度
for(var i=0; i<12; i++){
ctx.save();
ctx.lineWidth = 7 ;
ctx.strokeStyle= "#000";
ctx.translate(250,250) ; // 设置旋转圆点
ctx.rotate(i*30*Math.PI/180); //设置旋转角度 : 角度*Math.PI/180 = 弧度
ctx.beginPath();
ctx.moveTo(0,-170);
ctx.lineTo(0,-190);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
// 分刻度
for(var i=0;i<60;i++){
ctx.save();
ctx.lineWidth= 5 ;
ctx.strokeStyle = "#000" ;
ctx.translate(250,250);
ctx.rotate(i*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-180);
ctx.lineTo(0,-190);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
// 时针
ctx.save();
ctx.lineWidth = 7 ;
ctx.strokeStyle = "#000";
ctx.translate(250,250); //设置异次元空间的0,0点
ctx.rotate(hour*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-140);
ctx.lineTo(0,10);
ctx.closePath();
ctx.stroke();
ctx.restore();
//分针
ctx.save();
ctx.lineWidth = 5 ;
ctx.strokeStyle = "#000";
ctx.translate(250,250); //设置异次元空间的0,0点
ctx.rotate(min*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-160);
ctx.lineTo(0,15);
ctx.closePath();
ctx.stroke();
ctx.restore();
//秒针
ctx.save();
ctx.lineWidth = 3 ;
ctx.strokeStyle = "#F00";
ctx.translate(250,250); //设置异次元空间的0,0点
ctx.rotate(sec*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-170);
ctx.lineTo(0,20);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(0,0,5,0,360,false);
ctx.closePath();
ctx.fillStyle="grey";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(0,-150,5,0,360,false);
ctx.closePath();
ctx.fillStyle="grey";
ctx.fill();
ctx.stroke();
ctx.restore();
}
drawClock();
setInterval(drawClock,1000);
</script>
</body>
</html>Html5 - canvas - 时钟
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。