用Java Script语言画布来实现最简单的时钟效果，供大家参考，具体内容如下

效果图：

先看超文本标记语言代码：

html head meta charset=' UTF-8 ' title/title脚本类型=' text/JavaScript ' src=' http : js/demo 3。js '/脚本/头体画布id=' canvas '/画布/体/html JavaScript代码：

定义变量画布，上下文；函数draw(){//定义划时钟的方法定义变量数据=新日期();var hHoure=数据。gethours()；var mMin=数据。getminutes()；var SSec=数据。getseconds()；var h值=(hHoure * 30 mMin/2-90)*数学.PI/180；var mvvalue=(mMin * 6-90)* Math .PI/180；var svvalue=(sSec * 6-90)* Math .PI/180；var x=200，y=200，r=150context.clearRect(0，0，canvas.width，canvas。高度)；context.moveTo(x，y)；上下文弧(x，y，r，0，6 *数学.PI/180，假);//上下文。begin path()；语境。线宽=1；for(var I=0；i60i ){ context.moveTo(x，y)；context.arc(x，y，r，6 * i *数学.PI/180，6 *(一^ 1)*数学/180，假);}上下文。close path()；语境。笔画()；//上下文。begin path()；context . FillStyle=' white context . move to(x，y)；context.arc(x，y，r/1.1，-0，2*Math .PI，假);语境。close path()；语境。fill()；//上下文。begin path()；语境。线宽=3；for(var I=0；i12i ){ context.moveTo(x，y)；上下文弧(x，y，r，30 * i *数学.PI/180，30 *(一^ 1)*数学，假);}上下文。close path()；语境。笔画()；//上下文。begin path()；context . FillStyle=' white context . move to(x，y)；context.arc(x，y，r/1.12，0，2*Math .PI，假);语境。close path()；语境。fill()；语境。begin path()；context . FillStyle=' black context . move to(x，y)；context.arc(x，y，r/30，0，2*Math .PI，假);语境。fill()；//上下文。begin path()；语境。线宽=5；context.moveTo(x，y)；context.arc(x，y，r/2.5，hValue，hValue，false)；语境。笔画()；//上下文。begin path()；语境。线宽=3；context.moveTo(x，y)；context.arc(x，y，r/2，mv值，mv值，false)；语境。笔画()；//上下文。begin path()；语境。线宽=2；context.moveTo(x，y)；context.arc(x，y，r/1.6，sValue，sValue，false)；语境。笔画()；}窗口。onload=function(){ canvas=document。getelementbyid(' canvas ')；上下文=画布。get context(' 2d ')；canvas . height=500 canvas . width=500 setinterval(draw，1000)；draw()；}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。