JS+Canvas绘制动态时钟效果

2019-11-19 14:57:18

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：node.js基于fs模块对系统文件及目录进行读写操作的方法详解

下一篇：javascript实现电脑和手机版样式切换