HTML5---canvas 指针时钟-clock
来源:互联网 发布:有win本 mac 编辑:程序博客网 时间:2024/06/05 19:26
<!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="#A61C3E";//表盘(蓝色)cxt.beginPath();cxt.arc(250,250,200,0,Math.PI*360,false);cxt.closePath();cxt.stroke();//时刻度for(var i=0;i<12;i++){cxt.save();cxt.lineWidth=7;//设置时针的粗细cxt.strokeStyle="#005693";//设置时针的颜色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="#04562E";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="#04562E";cxt.translate(250,250);//设置异次元空间的0,0点,画布的圆心cxt.rotate(hour*30*Math.PI/180);cxt.beginPath();cxt.moveTo(0,-120);//针长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,-150);cxt.lineTo(0,15);cxt.closePath();cxt.stroke();cxt.restore();//秒针cxt.save();cxt.strokeStyle="#611123";cxt.lineWidth=3;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="#FFF";cxt.fill();cxt.stroke();//设置笔触样式(秒针已设置)cxt.restore();}drawClock();//1000毫秒前要显示//使用setInterval(代码,毫秒时间) 让时钟动起来setInterval(drawClock,1000);</script></body></html>
效果:
0 0
- HTML5---canvas 指针时钟-clock
- html5 canvas clock 时钟效果
- HTML5--clock(时钟)案例
- HTML5 CANVAS 时钟
- HTML5 canvas 可拖拽时钟
- html5-canvas-时钟
- HTML5 canvas时钟
- Html5 Canvas 绘制 时钟
- Html5--canvas时钟
- html5的canvas时钟
- HTML5 canvas 时钟
- HTML5 canvas时钟钟表!
- HTML5 Canvas 练习(简单时钟)
- HTML5 canvas 实现小时钟
- html5的canvas使用:时钟
- HTML5 Canvas绘制实时时钟
- 使用html5 canvas 制作时钟
- 通过html5 canvas绘制时钟
- UML——用例图
- ESP EBP等寄存器简介
- Lucas大组合数模板
- hdu 2837 Calculation【欧拉函数,快速幂求指数循环节】
- 九度oj-1135-字符串排序
- HTML5---canvas 指针时钟-clock
- 怎样才能成为被人需要的那个IT男
- 分而治之的思想用于大数据查询----阿冬专栏
- char和unsigned char强制转换成int后的差异
- java后台传递json到前台 中文乱码解决方法
- CAGradientLayer 渐变色
- hdu5398(lct维护最大生成树)
- C++中vector使用详细说明
- Windows Shell命令