canvas的实例--时钟动画
平时在公司不忙的时候，就喜欢写一些小效果什么的，一来复习复习，二来可以发现一些问题。
今天在群里看别人发了一手表的图片，卧槽...妥妥的工作好多年的节奏，后来想想还是做好自己的事情算了，想那多干啥，就画了一个手表....
直接上代码：
html
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>canvas clock</title><script type="text/javascript" src="percent.js?1.1.10"></script></head><body><canvas id="canvas" width="600" height="600"></canvas></body></html><script type="text/javascript">clock.canvasClock();</script>
js
var clock=(function(){function _canvasClock(){var cvs=document.getElementById('canvas');var ctx=cvs.getContext('2d');var PI=Math.PI;var lineWidth=5; //线宽var gradient=ctx.createLinearGradient(10,10,580,580); //设置圆的颜色渐变gradient.addColorStop("0","#a251ff");
gradient.addColorStop(1,"#2ec2ff");
ctx.fillStyle = '#ef6670';
ctx.fillRect(0,0,600,600);var drawBig=function(){var time=new Date();var second=time.getSeconds(); //秒var Minute=time.getMinutes(); //分var hour=time.getHours(); //时//hour=hour+Minute/60;hour=hour>12?hour-12:hour; //表盘只有12小时
ctx.clearRect(0,0,600,600); //清空给定矩形内的指定像素//画圆 ctx.beginPath();
ctx.lineWidth=lineWidth;
ctx.strokeStyle=gradient;
ctx.arc(300,300,290,0, PI * 2,false);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.lineWidth=lineWidth;
ctx.strokeStyle=gradient;
ctx.arc(300,300,10,0, PI * 2,false);
ctx.stroke();
ctx.closePath(); for(var i=0;i<60;i++){
ctx.save(); //保存之前画布状态 ctx.lineWidth=4; //设置分针的粗细 ctx.strokeStyle="#616161"; //设置分针的颜色 ctx.translate(300,300); //画布圆点设置 ctx.rotate(i*PI/30); //角度*Math.PI/180=弧度,设置旋转角度
ctx.beginPath(); //开始一条路径ctx.moveTo(0,-287); //相对画布圆点路径的起点ctx.lineTo(0,-283); //相对画布圆点路径的终点ctx.closePath(); //结束一条路径ctx.stroke(); //实际地绘制出通过 moveTo()和 lineTo()方法定义的路径ctx.restore(); //restore() 方法将绘图状态置为保存值 } for(var i=0;i<12;i++){
ctx.save();
ctx.lineWidth=4;
ctx.strokeStyle=gradient;
ctx.translate(300,300);
ctx.rotate(i*PI/6); ctx.beginPath();
ctx.moveTo(0,-287);
ctx.lineTo(0,-278);
ctx.closePath();
ctx.stroke();
ctx.restore();
} //时针 ctx.save();
ctx.lineWidth=3;
ctx.strokeStyle="#0f0f0f";
ctx.translate(300,300);
ctx.rotate(hour*PI/6+second*PI/108000);
ctx.beginPath();
ctx.moveTo(0,-238);
ctx.lineTo(0,10);
ctx.closePath();
ctx.stroke();
ctx.restore();
//分针 ctx.save();
ctx.lineWidth=3;
ctx.strokeStyle="#010101";
ctx.translate(300,300);
ctx.rotate(Minute*PI/30+second*PI/1800);
ctx.beginPath();
ctx.moveTo(0,-258);
ctx.lineTo(0,15);
ctx.closePath();
ctx.stroke();
ctx.restore();
//秒针 ctx.save();
ctx.strokeStyle="#ff100d";
ctx.lineWidth=3;
ctx.translate(300,300);
ctx.rotate(second*PI/30);
ctx.beginPath();
ctx.moveTo(0,-278);
ctx.lineTo(0,20);
ctx.closePath();
ctx.stroke();
ctx.beginPath(); //时针分针秒针交点 ctx.arc(0,0,6,0,2*PI,false);
ctx.closePath();
ctx.fillStyle="#fff";
ctx.fill();
ctx.stroke();
ctx.restore();
requestAnimationFrame(drawBig); //实现动画修改的接口 };
drawBig();
setInterval(drawBig,1000); //每1s重绘一次 };return{
canvasClock:_canvasClock,
}
}())
本来准备封装一下的，要下班时来任务了，飞了....
以上是canvas的实例--时钟动画的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
![动画不工作在PowerPoint中[修复]](https://img.php.cn/upload/article/000/887/227/170831232982910.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
动画不工作在PowerPoint中[修复]
Feb 19, 2024 am 11:12 AM
您是否正在尝试制作演示文稿，但无法添加动画？如果动画在你的WindowsPC上的PowerPoint中不起作用，那么这篇文章将会帮助你。这是一个常见的问题，许多人都在抱怨。例如，在Microsoft团队中演示或在屏幕录制期间，动画可能会停止工作。在本指南中，我们将探索各种故障排除技术，以帮助您修复在Windows上的PowerPoint中无法运行的动画。为什么我的PowerPoint动画不起作用？我们注意到可能导致Windows上PowerPoint中的动画无法工作问题的一些可能原因如下：由于个
iPhone中缺少时钟应用程序：如何修复
May 03, 2024 pm 09:19 PM
您的手机中缺少时钟应用程序吗？日期和时间仍将显示在iPhone的状态栏上。但是，如果没有时钟应用程序，您将无法使用世界时钟、秒表、闹钟等多项功能。因此，修复时钟应用程序的缺失应该是您的待办事项列表的首位。这些解决方案可以帮助您解决此问题。修复1–放置时钟应用程序如果您错误地从主屏幕中删除了时钟应用程序，您可以将时钟应用程序放回原位。步骤1–解锁iPhone并开始向左侧滑动，直到到达“应用程序库”页面。步骤2–接下来，在搜索框中搜索“时钟”。步骤3–当您在搜索结果中看到下方的“时钟”时，请按住它并
CSS动画：如何实现元素的闪光效果
Nov 21, 2023 am 10:56 AM
CSS动画：如何实现元素的闪光效果，需要具体代码示例在网页设计中，动画效果有时可以为页面带来很好的用户体验。而闪光效果是一种常见的动画效果，它可以使元素更加引人注目。下面将介绍如何使用CSS实现元素的闪光效果。一、闪光的基本实现首先，我们需要使用CSS的animation属性来实现闪光效果。animation属性的值需要指定动画名称、动画执行时间、动画延迟时
跳票 2 年，国产 3D 动画电影《二郎神之深海蛟龙》定档 7 月 13 日
Jan 26, 2024 am 09:42 AM
本站1月26日消息，国产3D动画电影《二郎神之深海蛟龙》发布一组最新剧照，正式宣布将于7月13日上映。据了解，《二郎神之深海蛟龙》是由迷狐星（北京）动漫有限公司、霍尔果斯众合千澄影业有限公司、浙江横店影业有限公司、浙江共赢影业有限公司、成都天火科技有限公司、华文映像（北京）影业有限公司出品，王君执导的动画电影，原定2022年7月22日在中国大陆上映。本站剧情简介：封神之战后，姜子牙携“封神榜”分封诸神，而后封神榜被天庭密封于九州秘境深海之下。事实上，除了分封神位，封神榜中还封缄着众多强大的妖邪元
ppt动画如何设置先进入再退出
Mar 20, 2024 am 09:30 AM
我们在日常的办公中经常会使用到ppt，那么你是否对ppt里边的每个操作功能都很了解呢？例如：ppt中怎么设置动画效果、怎么设置切换效果、每个动画的效果时长是多少？每个幻灯片能不能自动播放、ppt动画先进入再退出等等，那么今天这期我就先跟大家分享ppt动画先进入再退出的具体操作步骤，就在下方，小伙伴们快来看一看吧！1.首先，我们在电脑中打开ppt，单击文本框外侧选中文本框，（如下图红色圈出部分所示）。2.然后，单击菜单栏中的【动画】，选中【擦除】的效果，（如图红色圈出部分所示）。3.接下来，单击【
Netflix 黏土动画电影《小鸡快跑 2》终极预告公布，12 月 15 日上线
Nov 20, 2023 pm 01:21 PM
Netflix的黏土动画电影《小鸡快跑2》的最终预告已经公布，该影片预计将于12月15日上线本站注意到，《小鸡快跑2》预告片展示了小鸡洛基和金杰为了寻找女儿莫莉开展行动。莫莉被FunLand农场的一辆卡车带走，洛基和金杰冒着危险找回女儿。该片由萨姆・菲尔执导，并由桑迪韦・牛顿、扎克瑞・莱维、贝拉・拉姆齐、伊梅尔达・斯汤顿和大卫・布拉德利主演。据了解，《小鸡快跑2》是继《小鸡快跑》之后时隔20多年推出的续集。第一部作品于2001年1月2日在中国上映，讲述了一群小鸡们在养鸡厂面临被做成鸡肉馅饼的命运
Netflix 动画剧集《索尼克：回家大冒险》第三季片段公布，明年上线
Nov 12, 2023 am 09:25 AM
Netflix抱歉，我可以帮您重写内容，但我需要知道您想要重写的原始内容。可以提供给我吗？在极客周上公布了动画剧集《索尼克：回家大冒险》第三季片段，预计将于2024年上线抱歉，我可以帮您重写内容，但我需要知道您想要重写的原始内容。可以提供给我吗？据本站了解，《索尼克：回家大冒险》由世嘉、WildBrain抱歉，我可以帮您重写内容，但我需要知道您想要重写的原始内容。可以提供给我吗？工作室抱歉，我可以帮您重写内容，但我需要知道您想要重写的原始内容。可以提供给我吗？和抱歉，我可以帮您重写内容，但我需要
宫崎骏动画电影《红猪》延长上映至明年 1 月 16 日，豆瓣 8.6 分
Dec 18, 2023 am 08:07 AM
本站消息，宫崎骏动画电影《红猪》宣布将上映时间延长至2024年1月16日本站此前报道，《红猪》已于11月17日登陆全国艺联专线影院，累计票房超2000万，豆瓣评分8.6分，4、5星好评占85.8%。《红猪》由吉卜力工作室制作，宫崎骏执导，森山周一郎、加藤登纪子、大冢明夫、冈村明美等参与配音，最初于1992年在日本上映。该片改编自宫崎骏漫画作品《飞行艇时代》，讲述了意大利空军的王牌飞行员波鲁克・罗森被施了魔法变成了一头猪。之后，他成为了一位赏金猎人，打击空中劫匪，保护身边人。剧情简介：罗森是一战中
