Canvas制作时钟

来源：互联网发布：ios开发检测网络状态编辑：程序博客网时间：2024/05/16 10:28
<!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();//获取秒//限定小时数据为12hours = 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/180ctx.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/180ctx.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/180ctx.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/180ctx.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/180ctx.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>
阅读全文
0 0