本文实例讲述了javascript HTML5画布绘制时钟功能。分享给大家供大家参考，具体如下：

效果如下：

代码：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' titlewww.jb51.net画布绘制时钟/title style div { text-align : center；页边距-顶部：250 px}/style/head dydiv canvas id=' clock ' width=' 300 px ' height=' 300 px '/canvas/div script var DOM=document。getelementbyid(' clock ')；var CTX=DOM。GetContext(' 2d ')；可变宽度=CTX。帆布。宽度；可变高度=CTX。帆布。身高；var r=宽度/2;var rem=宽度/200;函数绘制背景(){ CTX。save()；ctx.translate(r，r)；//重新定义圆点到中心CTX。begin path()；线宽=10 * remctx.arc(0，0，r-5*rem，0，Math .PI*2，假);//圆点坐标，起始角0,结束角2,顺时针CTX。笔画()；var hourNum=[3，4，5，6，7，8，9，10，11，12，1，2]；//数组存小时数CTX . font=' 18px Arialctx . textalign=' center CTX . text baseline=' middlehournum . foreach(函数(Num，i) { var rad=2*Math .PI/12 * I；//弧度var x=(r-30 * rem)* Math。cos(rad)；var y=(r-30 * rem)*数学。sin(rad)；ctx.fillText(num，x，y)；});for(var I=0；i60i ){//画圆点var rad=2 *数学/60 * I；var x=(r-18 * rem)* Math。cos(rad)；var y=(r-18 * rem)* Math。sin(rad)；CTX。begin path()；if(I % 5==0){ CTX。FillStyle=' # 000(x，y，2，0，数学.PI*2，假);} else { CTX . FillStyle=' # cccctx . arc(x，y，2，0，Math .PI*2，假);} CTX。fill()；} CTX。close path()；}函数drawHour(小时、分钟){//时针CTX。save()；CTX。begin path()；var rad=2 *数学PI/12 *小时；var mrad=2 *数学PI . 12/60 *分钟；CTX。旋转(rad mrad)；CTX . line width=6 * rem CTX . move to(0，10 * rem)；ctx.lineTo(0，-r/2)；ctx.lineCap=' roundCTX。笔画()；CTX。restore()；}函数drawMinute(分钟，秒){//分针CTX。save()；CTX。begin path()；var rad=2 *数学PI/60 *分钟；var srad=2 *数学PI/60/60 *秒；CTX。旋转(rad srad)；CTX . line width=3 * rem CTX . move to(0，10 * rem)；ctx.lineTo(0，-r 30 * rem)；ctx.lineCap=' roundCTX。笔画()；CTX。restore()；}函数drawSecond(秒){//秒针CTX。save()；CTX。begin path()；CTX . FillStyle=' # c 14543 var rad=2 *数学PI/60 *秒；CTX。旋转(rad)；ctx.moveTo(-2*rem，20 * rem)；ctx.lineTo(2*rem，20 * rem)；ctx.lineTo(1*rem，-r 18 * rem)；ctx.lineTo(-1*rem，-r 18 * rem)；CTX。fill()；CTX。restore()；}函数drawDot(){//画中心圆圈CTX。begin path()；ctx.fillStyle=' # fffctx.arc(0，0，3*rem，0，2*Math .PI，假);CTX。fill()；}函数draw(){ ctx.clearRect(0，0，宽度，高度);var now=新日期();var小时=现在。gethours()；var分钟=现在。getminutes()；var秒=现在。getseconds()；绘制背景()；//背景drawHour(小时、分钟);//小时drawMinute(分钟，秒);//分钟drawSecond(秒);//秒钟draw DoT()；//中心圆点CTX。restore()；} setInterval(draw，1000)；/脚本/正文/html其中的雷姆值是为了使帆布画布大小变化时时钟的样式能够保持

感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试一下运行效果。

PS:这里再为大家推荐几款时间及日期相关工具供大家参考使用：

在线日期/天数计算器：http://工具。JB 51。net/jisuanqi/date _ jisuanqi

在线日期计算器/相差天数计算器：http://工具。JB 51。net/jis uan qi/日期计算

在线日期天数差计算器：http://工具。JB 51。net/jis uan qi/online datejsq

Unix操作系统操作系统时间戳（时间戳)转换工具：http://工具。JB 51。网络/代码/UNIX时间

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript时间与日期操作技巧总结》 、 《JavaScript+HTML5特效与技巧汇总》 、 《JavaScript图形绘制技巧总结》 、 《JavaScript数据结构与算法技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。