您的位置：首页 > Web前端 > HTML5

Html5 - canvas - 时钟

2016-11-14 17:59 260 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html canvas 时钟

相关文章推荐

新的分享

章节导航