一个精美的时钟动画
动画 一个 时钟 精美
2023-09-11 14:21:46 时间
完整代码,代码有注释就不说明了
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="GBK">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
border: 1px solid;
position: absolute;
margin-left: 200px;
}
</style>
</head>
<body>
<canvas id='canvas'></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
canvas.width='300';
canvas.height='300';
var ctx = canvas.getContext("2d");
function clock(){
ctx.save();
ctx.clearRect(0,0,300,300);//清理画布
ctx.translate(150,150);//
ctx.scale(0.7,0.7);//缩放比例
ctx.rotate(-Math.PI/2);//负向旋转2分之1个π
ctx.strokeStyle = "black";
ctx.fillStyle = "white";
ctx.lineWidth = 8;
ctx.lineCap = "round";
//画小时的格子
ctx.save();
//边旋转边画
for(var i=0;i<12;i++){
ctx.beginPath();
ctx.rotate(30*2*Math.PI/360);//等于Math.PI/6 总共360度分成12份,每份30度,转换成π
ctx.moveTo(100,0);
ctx.lineTo(120,0);
ctx.stroke();
ctx.closePath();
}
ctx.restore();
//画分钟的格子
ctx.save();
//边旋转边画
ctx.lineWidth = 5;//细一些
for(var i=0;i<60;i++){
if(i%5!=0){//小时的格子占据不用再次画
ctx.beginPath();
ctx.moveTo(115,0);
ctx.lineTo(120,0);
ctx.stroke();
ctx.closePath();
}
ctx.rotate(6*2*Math.PI/360);//旋转 等于Math.PI/30 总共360度分成60份,每份6度,转换成π
}
ctx.restore();
//计算时分秒
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
hour = hour>=12 ? hour-12 : hour;
//画时针
ctx.fillStyle = "black";
ctx.save();
ctx.beginPath();
ctx.lineWidth = 14;
//旋转角度 小时:hour * (Math.PI/6) 分钟的话,在小时的基础上再多除以60,秒钟则在分钟的基础上再除以60,3者加起来
ctx.rotate(hour * (Math.PI/6) + min * (Math.PI/(6*60)) + sec * (Math.PI/(6*60*60)) );
ctx.moveTo(-20,0);
ctx.lineTo(80,0);
ctx.stroke();
ctx.restore();
//画分针
ctx.save();
ctx.beginPath();
ctx.lineWidth = 10;
//旋转角度
ctx.rotate(min * (Math.PI/30)+ sec * (Math.PI/(30*60)) );
ctx.moveTo(-28,0);
ctx.lineTo(110,0);
ctx.stroke();
ctx.restore();
//画秒针
ctx.save();
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineWidth = 6;
//旋转角度
ctx.rotate(sec * (Math.PI/30));
ctx.moveTo(-36,0);
ctx.lineTo(126,0);
ctx.stroke();
//中心画一个红色小圆
ctx.arc(0,0,6,0,2*Math.PI);
ctx.stroke();
ctx.restore();
//钟外围的大圆
ctx.save();
ctx.lineWidth = 14;
ctx.beginPath();
ctx.strokeStyle='lightblue';
ctx.arc(0,0,142,0,2*Math.PI);
ctx.stroke();
ctx.restore();
ctx.restore();
//执行动画
window.requestAnimationFrame(clock);
}
//执行动画
window.requestAnimationFrame(clock);
</script>
</html>
相关文章
- CSS动画实例:旋转的同心圆
- CSS动画实例:Loading加载动画效果(三)
- animate结合jQuery实现hover用户交互动画
- 微信小程序 - 点餐界面添加购物车左右摆动动画(用户点击添加到购物车后会有一个左右摆动的购物车提示)
- 《HTML5+JavaScript动画基础》——2.3 用代码实现动画
- 如何用Swift创建一个复杂的加载动画
- 读取svg图片为UIBezierPath,开心做动画
- 用 Swift 制作一个漂亮的汉堡按钮过渡动画
- Swift - 使用CAKeyframeAnimation实现关键帧动画
- 动画效果----webkit-animation-----动画背景变化transition:background-color 1s linear;
- 获取一个组件的坐标值getBoundingClientRect()------小球动画效果
- SwiftUI 文本组件之滚动动画数字组件 实现充满情感的微交互
- QTimeLine 控制动画(一步一步的往前变化,并在每次变化时都会发出一个frameChanged信号)
- 文字过渡动画,曲线过渡动画,,使用这个插件assign shape keys
- 运动锻炼 开心背单词 读句子,单词,字母,看图例, 翻译,看动画,学英语,轻松背单词,简单背单词
- 零基础Unity做一个中秋诗词鉴赏网页,提前祝您中秋快乐!(DoTween动画 | WebGL视频 | 大文件上传GitHub)
- matplotlib简单的新手教程和动画
- 关于Unity中的帧动画组件的编写
- 《慕客网:IOS动画案例之会跳动的登入界面(上)》学习笔记 -Sketch的使用
- 【Unity入门计划】Unity2D动画(1)-动画系统的组成及功能的使用