<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
function loop(){
var can = document.getElementById("canvas");
can.width=500;
can.height=500;
var context = can.getContext("2d");
context.clearRect(0,0,500,500); //每调用一次回调函数,清除画布,重新绘图
context.translate(250,250); //为使旋转中心位于画布中心,将画布向右下方平移
context.rotate(-180 * (Math.PI / 180)); //调整旋转中心方向,调整为竖直向上
//绘制外围的圆
context.arc(0,0,240,0,2*Math.PI,true);
context.strokeStyle="red";
context.stroke();
//绘制小时
for(var i=0;i<12;i++){
context.beginPath();
context.strokeStyle="black";
context.lineWidth = 8;
context.moveTo(0,220);
context.lineTo(0,240);
context.stroke();
context.rotate(30*(Math.PI/180));
}
//绘制分钟
for(var i=0;i<60;i++){
context.beginPath();
context.strokeStyle="black";
context.lineWidth = 5;
context.moveTo(0,230);
context.lineTo(0,240);
context.stroke();
context.rotate(6*(Math.PI/180));
}
context.closePath();
//绘制表盘中心原点
context.beginPath();
context.restore();
context.fillStyle = "red";
context.strokeStyle="red";
context.save();
context.arc(0,0,8,0,2*Math.PI,true);
context.stroke();
context.fill();
//绘制时分秒针
//先获取时间
var date = new Date();
var hour = date.getHours();
hour = hour>12?hour-12:hour;
var minute = date.getMinutes();
var second = date.getSeconds();
/* console.log(hour);*/
//时针
context.restore();
context.strokeStyle="black";
context.save();
context.beginPath()
context.lineWidth=7;
// console.log(hour, minute, second);
context.rotate(hour * ( Math.PI / 6) + minute * (Math.PI / 360) + second * (Math.PI / 21600));
context.moveTo(0,0);
context.lineTo(0,130);
context.stroke();
//分针
context.restore();
context.strokeStyle="red";
context.save();
context.beginPath()
context.lineWidth=4;
// console.log(hour, minute, second);
context.rotate(minute * (Math.PI / 30) + second * (Math.PI / 1800));
context.moveTo(0,0);
context.lineTo(0,190);
context.stroke();
//秒针
context.restore();
context.strokeStyle="green";
context.save();
context.beginPath()
context.lineWidth=3;
// console.log(hour, minute, second);
context.rotate(second * (Math.PI / 30));
context.moveTo(0,0);
context.lineTo(0,230);
context.stroke();
window.requestAnimationFrame(loop);
}
window.requestAnimationFrame(loop);
//requestAnimationFrame回调函数执行次数通常是每秒60次
// 但在大多数遵循W3C建议的浏览器中,回调函数执行次数通常与浏览器屏幕刷新次数相匹配
</script>
</html>
canvas实现一个实时时钟
最新推荐文章于 2023-06-06 01:06:49 发布