运用canvas绘制出时钟效果

何妨吟啸且徐行?

于 2024-09-27 09:03:28 发布

阅读量250

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_30327395/article/details/142584415

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
canvas{
border: 1px solid red;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<script>
var canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
setInterval(function(){
context.clearRect(0,0,800,800)
// 获取当前的时间
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hor = now.getHours();
console.log(hor+":"+min+":"+sec);

// 刻度公式 60*Math.PI/180
for(var i=0;i<12;i++){
context.save();
context.beginPath();
context.translate(390,390);
context.rotate(i*30*Math.PI/180);
context.moveTo(0,-380);
context.lineTo(0,-360);
context.stroke();
context.closePath();
// 还回来
context.restore();
}

// 分刻度
for(var i=0;i<60;i++){
context.save();
context.beginPath();
context.translate(390,390);
context.rotate(i*6*Math.PI/180);
context.lineWidth = 8;
context.moveTo(0,-380);
context.lineTo(0,-370);
context.strokeStyle = "pink";
context.stroke();
context.closePath();
// 还回来
context.restore();
}

// 秒针
context.save();
context.beginPath();
context.translate(390,390);
context.rotate(sec*6*Math.PI/180);
context.lineWidth = 3;
context.moveTo(0,17);
context.lineTo(0,-300);
context.strokeStyle = "red";
context.stroke();
context.closePath();
// 还回来
context.restore();

context.beginPath();
context.lineWidth = 10;
context.strokeStyle = "teal"
context.arc(390,390,380,0,2*Math.PI);
context.stroke();
context.closePath();
},1000)

</script>
</body>
</html>