本篇文章为大家展示了如何使用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实现时钟动画，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
