用html5制作一个时钟,用HTML5做个时钟

心情不好，游戏不想玩，弄个小东西排解一下心中的不畅：

本时钟是通过HTML5的Canvas实现的，相关的技术大家可以到这儿去看看： 链接地址

下面就没有什么好所的了，上面的链接中有详细的说明，有图有真相 ～～

 

下面是代码：

001 

002     

003         

HTML5 Test

004         

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         

103     

104     

105         

107              Your browser is not support Canvas tag!

108         

109         

110         

111     

112 

==============================================================

刚才有个哥们说没有表盘背景，现补上：

 

作者 yanglion