首页 > 代码库 > html5学习(一)--canvas画时钟
html5学习(一)--canvas画时钟
利用空余时间学习一下html5.
1 <!doctype html> 2 <html> 3 <head></head> 4 <body> 5 <canvas id="clock" width="500" height="500"></canvas> 6 <script> 7 var clock=document.getElementById(‘clock‘); 8 var cxt = clock.getContext(‘2d‘); 9 function drawClock(){ 10 //清除画布 11 cxt.clearRect(0,0,500,500); 12 var now = new Date(); 13 var sec = now.getSeconds(); 14 var min = now.getMinutes(); 15 var hour = now.getHours(); 16 //小时必须获取浮点类型(小时+分数转化成的小时); 17 hour= hour+min/60; 18 //问题：2014年8月18日 22:08:41 19 //将24小时进制转换成12小时 20 hour= hour>12?hour-12:hour; 21 //表盘(蓝色) 22 cxt.lineWidth=10; 23 cxt.strokeStyle="blue"; 24 //刻度 25 cxt.beginPath(); 26 cxt.arc(250,250,200,0,360,false); 27 cxt.closePath(); 28 cxt.stroke(); 29 //时刻度 30 for(var i=0;i<12;i++){ 31 cxt.save();//保持当前状态 32 cxt.lineWidth=10;//设置时针的粗细 33 cxt.strokeStyle="#000";//设置时针颜色 34 cxt.translate(250,250);//设置0,0点 35 cxt.rotate(i*30*Math.PI/180);//设置旋转角度（=角度*Math*PI/180） 36 cxt.beginPath(); 37 cxt.moveTo(0,-170); 38 cxt.lineTo(0,-190); 39 cxt.closePath(); 40 cxt.stroke(); 41 cxt.restore();//释放状态 42 } 43 //分刻度 44 for(var i=0;i<60;i++){ 45 cxt.save();//保持当前状态 46 cxt.lineWidth=5;//设置时针的粗细 47 cxt.strokeStyle="#000";//设置时针颜色 48 cxt.translate(250,250);//设置0,0点 49 cxt.rotate(i*6*Math.PI/180);//设置旋转角度（=角度*Math*PI/180） 50 cxt.beginPath(); 51 cxt.moveTo(0,-180); 52 cxt.lineTo(0,-190); 53 cxt.closePath(); 54 cxt.stroke(); 55 cxt.restore();//释放状态 56 } 57 //时针 58 cxt.save(); 59 //设置时针风格 60 cxt.lineWidth=10; 61 cxt.strokeStyle="#000"; 62 //设置异次元空间的0,0点 63 cxt.translate(250,250); 64 cxt.rotate(hour*30*Math.PI/180)//设置旋转角度 65 cxt.beginPath(); 66 cxt.moveTo(0,-140); 67 cxt.lineTo(0,10); 68 cxt.closePath(); 69 cxt.stroke(); 70 cxt.restore(); 71 72 //分针 73 cxt.save(); 74 cxt.lineWidth=7; 75 cxt.strokeStyle="#000"; 76 //设置异次元空间的0,0点 77 cxt.translate(250,250); 78 cxt.rotate(min*6*Math.PI/180)//设置旋转角度 79 cxt.beginPath(); 80 cxt.moveTo(0,-160); 81 cxt.lineTo(0,15); 82 cxt.closePath(); 83 cxt.stroke(); 84 cxt.restore(); 85 86 //秒针 87 cxt.save(); 88 cxt.lineWidth=3; 89 cxt.strokeStyle="red"; 90 //设置异次元空间的0,0点 91 cxt.translate(250,250); 92 cxt.rotate(sec*6*Math.PI/180)//设置旋转角度 93 cxt.beginPath(); 94 cxt.moveTo(0,-170); 95 cxt.lineTo(0,20); 96 cxt.closePath(); 97 cxt.stroke(); 98 //画出时针,分针,秒针的交叉点 99 cxt.beginPath();100 cxt.arc(0,0,5,0,360,false);101 //设置填充样式102 cxt.fillStyle="yellow";103 cxt.fill();104 //设置笔触样式105 cxt.stroke();106 //设置秒针钱小圆点107 cxt.beginPath();108 cxt.arc(0,-150,5,0,360,false);109 //设置填充样式110 cxt.fillStyle="yellow";111 cxt.fill();112 //设置笔触样式113 cxt.stroke();114 cxt.restore();115 }116 //使用setInterval(代码，毫秒时间)时钟转动117 drawClock();118 setInterval(drawClock,1000);119 </script>120 </body>121 122 </html>
显示效果：
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。