html5学习之路--------实现时钟
来源:互联网 发布:linux waitpid函数 编辑:程序博客网 时间:2024/05/17 09:29
<!doctype html><html><head></head><body><canvas id="clock" width="500" height="500">您的浏览器不支持canvas标签,无法看到时钟</canvas><script>var clock=document.getElementById('clock');var cxt=clock.getContext('2d');function drawClock(){//清除画布cxt.clearRect(0,0,500,500);var now =new Date();var sec=now.getSeconds();var min=now.getMinutes();var hour=now.getHours();//小时必须获取浮点类型(小时+分数转化成的小时)hour=hour+min/60;//问题 19:23:30//将24小时进制转换为12小时hour=hour>12?hour-12:hour;//表盘(蓝色)cxt.lineWidth=10;cxt.strokeStyle="blue";cxt.beginPath();cxt.arc(250,250,200,0,360,false);cxt.closePath();cxt.stroke();//刻度//时刻度for(var i=0;i<12;i++){cxt.save();//设置时针的粗细cxt.lineWidth=7;//设置时针的颜色cxt.strokeStyle="#000";//先设置0,0点cxt.translate(250,250);//再设置旋转角度cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度cxt.beginPath();cxt.moveTo(0,-170);cxt.lineTo(0,-190);cxt.closePath();cxt.stroke();cxt.restore();}//分刻度for(var i=0;i<60;i++){cxt.save();//设置分刻度的粗细cxt.lineWidth=5;//设置颜色(使用时刻度的颜色)cxt.strokeStyle="#000";//设置或者重置画布的0,0点cxt.translate(250,250);//设置旋转角度cxt.rotate(i*6*Math.PI/180);//画分针刻度cxt.beginPath();cxt.moveTo(0,-180);cxt.lineTo(0,-190);cxt.closePath();cxt.stroke();cxt.restore();}//时针cxt.save();//设置时针风格cxt.lineWidth=7;//设置时针的颜色cxt.strokeStyle="#000";//设置异次元空间的0,0点cxt.translate(250,250);//设置旋转角度cxt.rotate(hour*30*Math.PI/180);cxt.beginPath();cxt.moveTo(0,-140);cxt.lineTo(0,10);cxt.closePath();cxt.stroke();cxt.restore();//分针cxt.save();//设置分针的风格cxt.lineWidth=5;cxt.strokeStyle="#000";//设置异次元空间分针画布的圆心cxt.translate(250,250);//设置旋转角度cxt.rotate(min*6*Math.PI/180);cxt.beginPath();cxt.moveTo(0,-160);cxt.lineTo(0,15);cxt.closePath();cxt.stroke();cxt.restore();//秒针cxt.save();//设置秒针的风格//颜色红色cxt.strokeStyle="red";//粗细 3像素cxt.lineWidth=3;//重置0,0点cxt.translate(250,250);//设置旋转角度cxt.rotate(sec*6*Math.PI/180);//画图cxt.beginPath();cxt.moveTo(0,-170);cxt.lineTo(0,20);cxt.closePath();cxt.stroke();//画出时针、分针、秒针的交叉点、cxt.beginPath();cxt.arc(0,0,5,0,360,false);cxt.closePath();//设置填充样式cxt.fillStyle="gray";cxt.fill();//设置笔触样式(秒针已设置)cxt.stroke();//设置秒针前段的小圆点cxt.beginPath();cxt.arc(0,-150,5,0,360,false);cxt.closePath();//设置填充样式cxt.fillStyle="gray";cxt.fill();//设置笔触样式(秒针已设置)cxt.stroke();cxt.restore();}//使用setInterval(代码,毫秒时间) 让时钟动起来drawClock();setInterval(drawClock,1000);</script></body></html>
0 0
- html5学习之路--------实现时钟
- html5之canvas实现模拟简易时钟
- html5学习canvas实例之时钟
- html5 实现时钟
- HTML5之时钟
- html5+jQuery实现数字时钟/模拟时钟
- STM32f4学习之路--时钟
- 网页时钟实现代码html5
- HTML5实现的实体时钟
- HTML5 canvas 实现小时钟
- 用HTML5 Canvas 实现的 时钟
- 使用html5 canvas实现漂亮时钟
- HTML5 简单页面实现时钟效果
- HTML5 Canvas实现圆形时钟简易教程
- html5的canvas实现实时时钟
- STM32F407学习之时钟
- stm32学习之时钟
- HTML5之Canvas时钟小程序
- oracleimp/exp命令使用
- 单人纸牌 记忆化搜索求概率
- C#中axWindowsMediaPlayer控件的用法
- 匹配不大于99.99的数字的正则表达式
- 别再给员工讲道理了,没人听!
- html5学习之路--------实现时钟
- 奖学金
- 数 7 打表
- 在imageView依次添加7个手势, 1.点击哪个按钮,往imageView上添加哪个手势.(保证视图上只有一个手势). 2.轻拍:点击视图切换美女图片.(imageView上首先展示的美女
- stm32系统RCC
- Ubuntu下常用的APT命令参数(2)
- APP IOS6 适配iOS7开发计巧
- 51单片机实例收藏
- Android性能优化