平时在公司不忙的时候，就喜欢写一些小效果什么的，一来复习复习，二来可以发现一些问题。
今天在群里看别人发了一手表的图片，卧槽…妥妥的工作好多年的节奏，后来想想还是做好自己的事情算了，想那多干啥，就画了一个手表….
直接上代码：
html
canvas clock clock.canvasClock();
登录后复制
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的实例–时钟动画的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2910971.html
