这篇文章主要介绍了JS+Canvas如何绘制动态时钟效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
具体内容如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #mycanvas{ position: absolute; left:50%; margin-left:-250px; border:5px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); background-color: rgb(58, 179, 255); } </style> </head> <body> <!-- canvas:html5新增的画布对象,可以在其中绘制任何的图形,以及线条效果,包括图片 注意canvas的尺寸应该通过元素的属性直接设置,而不是使用样式实现(失帧) --> <canvas id="mycanvas" width="500px" height="500px">您的浏览器太low了,请切换</canvas> <script> //获取画布对象 var mycanvas = document.getElementById('mycanvas'); //获取一个2d绘图环境(拿到一支画笔) var ctx = mycanvas.getContext('2d'); function draw(){ //获取系统时间 var nowTime = new Date(); var hours = nowTime.getHours();//获取时 var minutes = nowTime.getMinutes();//获取分 var seconds = nowTime.getSeconds();//获取秒 //防止小时超过12 hours = hours > 12 ? hours-12 : hours; //精准设置小时值 hours = hours + minutes/60; //清除画布(防止覆盖) ctx.clearRect(0,0,500,500); //初始化画笔的样式 ctx.lineWidth = 5; //设置线条的宽度 ctx.strokeStyle = '#fff'; //设置线条颜色 ctx.beginPath();//开始新的绘图路径 //设置一个圆形路径 ctx.arc(250,250,150,0,360,false); //绘制图形 ctx.stroke(); ctx.closePath();//结束当前绘图路径 //绘制刻度(时刻度) for(var i = 0;i < 12;i++){ ctx.beginPath(); ctx.lineWidth = 10; //保存当前绘图环境 ctx.save(); //重置绘制起始位置(将圆心位置重置为0,0) ctx.translate(250,250); //旋转画布到一定的弧度 弧度=角度*PI/180 ctx.rotate(i * 30 * Math.PI / 180); //设置绘制线条的起始位置 ctx.moveTo(0,140); //设置线条的结束位置 ctx.lineTo(0,150); //绘制路径 ctx.stroke(); //还原初始的绘图环境 ctx.restore(); ctx.closePath(); } //绘制刻度(分刻度) for(var i = 0;i < 60;i++){ ctx.beginPath(); ctx.lineWidth = 3; //保存当前绘图环境 ctx.save(); //重置绘制起始位置(将圆心位置重置为0,0) ctx.translate(250,250); //旋转画布到一定的弧度 弧度=角度*PI/180 ctx.rotate(i * 6 * Math.PI / 180); //设置绘制线条的起始位置 ctx.moveTo(0,142); //设置线条的结束位置 ctx.lineTo(0,146); //绘制路径 ctx.stroke(); //还原初始的绘图环境 ctx.restore(); ctx.closePath(); } /*绘制时针*/ ctx.beginPath(); ctx.lineWidth = 5; //保存当前绘图环境 ctx.save(); //重置绘制起始位置(将圆心位置重置为0,0) ctx.translate(250,250); //旋转画布到一定的弧度 弧度=角度*PI/180 ctx.rotate(hours * 30 * Math.PI / 180); //设置绘制线条的起始位置 ctx.moveTo(0,10); //设置线条的结束位置 ctx.lineTo(0,-100); //绘制路径 ctx.stroke(); //还原初始的绘图环境 ctx.restore(); ctx.closePath(); /*绘制分针*/ ctx.beginPath(); ctx.lineWidth = 3; //保存当前绘图环境 ctx.save(); //重置绘制起始位置(将圆心位置重置为0,0) ctx.translate(250,250); //旋转画布到一定的弧度 弧度=角度*PI/180 ctx.rotate(minutes * 6 * Math.PI / 180); //设置绘制线条的起始位置 ctx.moveTo(0,10); //设置线条的结束位置 ctx.lineTo(0,-120); //绘制路径 ctx.stroke(); //还原初始的绘图环境 ctx.restore(); ctx.closePath(); /*绘制秒针*/ ctx.beginPath(); ctx.lineWidth = 1; ctx.strokeStyle = '#f00'; //保存当前绘图环境 ctx.save(); //重置绘制起始位置(将圆心位置重置为0,0) ctx.translate(250,250); //旋转画布到一定的弧度 弧度=角度*PI/180 ctx.rotate(seconds * 6 * Math.PI / 180); //设置绘制线条的起始位置 ctx.moveTo(0,10); //设置线条的结束位置 ctx.lineTo(0,-135); //绘制路径 ctx.stroke(); //还原初始的绘图环境 ctx.restore(); ctx.closePath(); } setInterval(draw,1000); </script> </body> </html>
JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。
感谢你能够认真阅读完这篇文章,希望小编分享的“JS+Canvas如何绘制动态时钟效果”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。