<!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>
.clocks{
height: 500px;
margin: 25px auto;
position: relative;
width: 500px;
}
</style>
<script src="./HTML5高级实践素材/项目实践课素材/第二部分/综合项目2/Hou/assets/js/jquery.min.js"></script>
</head>
<body>
<header>
<h2>时钟</h2>
</header>
<div class="clocks">
<canvas id="canvas" width="500" height="500"></canvas>
</div>
<script>
//定义变量
var canvas,ctx;
var clockRadius = 250;
var clockImage;
//清空
function clear() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene()
{
//清空
clear();
//得到系统时间
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
hours = hours > 12 ? hours - 12 : hours;
var hour = hours + minutes / 60;
var minute = minutes + seconds / 60;
// console.log(hours+" "+minutes+" "+seconds);
//保存
ctx.save();
//画外框
ctx.drawImage(clockImage,0,0,500,500);
ctx.translate(canvas.width / 2,canvas.height / 2);
ctx.beginPath();
//画数字
ctx.font = '36px Arial';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for(var n = 1;n <= 12;n++){
var theta = (n - 3) * (Math.PI * 2)/12;
var x = clockRadius *0.7*Math.cos(theta);
var y = clockRadius * 0.7 * Math.sin(theta);
ctx.fillText(n,x,y);
}
//画小时
ctx.save();
var theta = (hour - 3) * 2 * Math.PI / 12;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15,-5);
ctx.lineTo(-15,5);
ctx.lineTo(-15,5);
ctx.lineTo(clockRadius *0.5,1);
ctx.lineTo(clockRadius *0.5,-1);
ctx.fill();
ctx.restore();
//画分钟
ctx.save();
var theta = (minute - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15,-4);
ctx.lineTo(-15,4);
ctx.lineTo(clockRadius *0.8,1);
ctx.lineTo(clockRadius *0.8,-1);
ctx.fill();
ctx.restore();
//画秒钟
ctx.save();
var theta = (seconds - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15,-3);
ctx.lineTo(-15,3);
ctx.lineTo(clockRadius *0.9,1);
ctx.lineTo(clockRadius *0.9,-1);
ctx.fillStyle = '#0f0';
ctx.fill();
ctx.restore();
// ctx.fillRect(50,50,100,100);
ctx.restore();
}
//初始化
$(function(){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
clockImage = new Image();
clockImage.src = './HTML5高级实践素材/项目实践课素材/第一部分/第7章/img/125855_nnla_89964.png';
setInterval(drawScene,1000);
});
</script>
</body>
</html>
js实现时钟效果
最新推荐文章于 2022-04-12 23:14:24 发布