HTML5 05 Canvas实例 闹钟
2014-08-18 14:31
381 查看
<!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>
相关文章推荐
- 【实例】html5-canvas通过鼠标绘制线段
- HTML5-Canvas标签使用实例一
- HTML5-canvas实例:刮刮乐游戏
- html5<canvas操作图像实例之弹性照片墙>
- html5之Canvas路径绘图、坐标变换应用实例
- 实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
- HTML5组件Canvas实现图像灰度化(步骤+实例效果)
- html5 canvas绘制矩形和圆形的实例代码
- HTML5 Canvas 基础API和实例
- 基于html5 canvas实现漫天飞雪效果实例
- HTML5 Canvas 基础API和实例
- html5之canvas实例(一)
- HTML5 Canvas 基础API和实例
- 【实例】html5-canvas中实现背景图片的移动
- 【实例】html5-canvas中实现背景图片的移动
- html5<canvas图像合成实例之随机闪烁的星星>
- HTML5-canvas实例:2D折线数据图与2D扇形图
- [转]html5之Canvas坐标变换应用-时钟实例
- JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
- HTML5 canvas双缓存实例