用HTML5做个时钟
程序员文章站
2022-04-19 18:17:00
心情不好，游戏不想玩，弄个小东西排解一下心中的不畅：
本时钟是通过HTML5的Canvas实现的，相关的技术大家可以到这儿去看看： 链接地址 &n...
心情不好，游戏不想玩，弄个小东西排解一下心中的不畅：
本时钟是通过HTML5的Canvas实现的，相关的技术大家可以到这儿去看看： 链接地址
下面就没有什么好所的了，上面的链接中有详细的说明，有图有真相 ～～
下面是代码：
001 <html>
002 <head>
003 <title>HTML5 Test</title>
004 <script type="application/x-javascript">
005 var panel, ctx, img;
006 var pw, ph, ox, oy;
007 function init(){
008 panel = document.getElementById("panel");
009 pw = panel.width;
010 ph = panel.height;
011 ox = pw/2;
012 oy = ph/2;
013 if(panel.getContext){
014 ctx = panel.getContext('2d');
015 }else{
016 alert('Your browser is not support Canvas tag!');
017 }
018
019 ctx.translate(ox, oy);
020
021 img = new Image();
022 img.onload = function(){
023 setInterval('draw()',1000);
024 }
025 img.src = 'bg.jpg';
026 }
027
028
029 function drawSecond(){
030 ctx.save();
031 ctx.rotate(Math.PI/180*currTime().s*6);
032 ctx.strokeStyle = "#09f";
033 ctx.lineWidth = 2;
034 ctx.lineCap = 'round'
035 ctx.beginPath();
036 ctx.moveTo(0,0);
037 ctx.lineTo(0,-140);
038 ctx.stroke();
039 ctx.restore();
040 }
041
042 function drawMinute(){
043 ctx.save();
044 ctx.rotate(Math.PI/180*currTime().m*6);
045 ctx.strokeStyle = "#f90";
046 ctx.lineWidth = 6;
047 ctx.lineCap = 'round'
048 ctx.beginPath();
049 ctx.moveTo(0,0);
050 ctx.lineTo(0,-100);
051 ctx.stroke();
052 ctx.restore();
053 }
054
055 function drawHour(){
056 ctx.save();
057 ctx.rotate(Math.PI/180*currTime().h*30+Math.PI/180*currTime().m/
058 2);
059 ctx.strokeStyle = "#999";
060 ctx.lineWidth = 10;
061 ctx.lineCap = 'round'
062 ctx.beginPath();
063 ctx.moveTo(0,0);
064 ctx.lineTo(0,-60);
065 ctx.stroke();
066 ctx.restore();
067 }
068 function draw(){
069 ctx.clearRect(-pw/2,-ph/2,pw,ph);
070 drawBackground();
071 drawSecond();
072 drawMinute();
073 drawHour();
074 document.getElementById('time').innerHTML=currTimeStr();
075 }
076
077 function drawBackground(){
078 ctx.save();
079 ctx.translate(0, 0);
080 ctx.drawImage(img,-250,-250,500,500);
081 ctx.restore();
082 }
083
084 function currTimeStr(){
085 var d = new Date();
086 var h = d.getHours();
087 var m = d.getMinutes();
088 var s = d.getSeconds();
089 return h+':'+m+':'+s
090 }
091
092 function currTime(){
093 var d = new Date();
094 var h = d.getHours();
095 var m = d.getMinutes();
096 var s = d.getSeconds();
097 if(h>12){
098 h = h-12;
099 }
100 return {"h":h,"m":m,"s":s};
101 }
102 </script>
103 </head>
104 <body onload="init()">
105 <canvas style="border:1px solid #000" id="panel" width="500" height="500
106 ">
107 Your browser is not support Canvas tag!
108 </canvas>
109 <br/>
110 <span id="time"></span>
111 </body>
112 </html>
==============================================================
刚才有个哥们说没有表盘背景，现补上：
作者 yanglion
本时钟是通过HTML5的Canvas实现的，相关的技术大家可以到这儿去看看： 链接地址
下面就没有什么好所的了，上面的链接中有详细的说明，有图有真相 ～～
下面是代码：
001 <html>
002 <head>
003 <title>HTML5 Test</title>
004 <script type="application/x-javascript">
005 var panel, ctx, img;
006 var pw, ph, ox, oy;
007 function init(){
008 panel = document.getElementById("panel");
009 pw = panel.width;
010 ph = panel.height;
011 ox = pw/2;
012 oy = ph/2;
013 if(panel.getContext){
014 ctx = panel.getContext('2d');
015 }else{
016 alert('Your browser is not support Canvas tag!');
017 }
018
019 ctx.translate(ox, oy);
020
021 img = new Image();
022 img.onload = function(){
023 setInterval('draw()',1000);
024 }
025 img.src = 'bg.jpg';
026 }
027
028
029 function drawSecond(){
030 ctx.save();
031 ctx.rotate(Math.PI/180*currTime().s*6);
032 ctx.strokeStyle = "#09f";
033 ctx.lineWidth = 2;
034 ctx.lineCap = 'round'
035 ctx.beginPath();
036 ctx.moveTo(0,0);
037 ctx.lineTo(0,-140);
038 ctx.stroke();
039 ctx.restore();
040 }
041
042 function drawMinute(){
043 ctx.save();
044 ctx.rotate(Math.PI/180*currTime().m*6);
045 ctx.strokeStyle = "#f90";
046 ctx.lineWidth = 6;
047 ctx.lineCap = 'round'
048 ctx.beginPath();
049 ctx.moveTo(0,0);
050 ctx.lineTo(0,-100);
051 ctx.stroke();
052 ctx.restore();
053 }
054
055 function drawHour(){
056 ctx.save();
057 ctx.rotate(Math.PI/180*currTime().h*30+Math.PI/180*currTime().m/
058 2);
059 ctx.strokeStyle = "#999";
060 ctx.lineWidth = 10;
061 ctx.lineCap = 'round'
062 ctx.beginPath();
063 ctx.moveTo(0,0);
064 ctx.lineTo(0,-60);
065 ctx.stroke();
066 ctx.restore();
067 }
068 function draw(){
069 ctx.clearRect(-pw/2,-ph/2,pw,ph);
070 drawBackground();
071 drawSecond();
072 drawMinute();
073 drawHour();
074 document.getElementById('time').innerHTML=currTimeStr();
075 }
076
077 function drawBackground(){
078 ctx.save();
079 ctx.translate(0, 0);
080 ctx.drawImage(img,-250,-250,500,500);
081 ctx.restore();
082 }
083
084 function currTimeStr(){
085 var d = new Date();
086 var h = d.getHours();
087 var m = d.getMinutes();
088 var s = d.getSeconds();
089 return h+':'+m+':'+s
090 }
091
092 function currTime(){
093 var d = new Date();
094 var h = d.getHours();
095 var m = d.getMinutes();
096 var s = d.getSeconds();
097 if(h>12){
098 h = h-12;
099 }
100 return {"h":h,"m":m,"s":s};
101 }
102 </script>
103 </head>
104 <body onload="init()">
105 <canvas style="border:1px solid #000" id="panel" width="500" height="500
106 ">
107 Your browser is not support Canvas tag!
108 </canvas>
109 <br/>
110 <span id="time"></span>
111 </body>
112 </html>
==============================================================
刚才有个哥们说没有表盘背景，现补上：
作者 yanglion