本文实例为大家分享了射流研究…圆形时钟效果的具体代码，供大家参考，具体内容如下

代码：

！DOCTYPE html html head meta charset=' utf-8 '/title时钟/title style * { margin : 0；padd : 0；} div.dd { margin: 0 auto宽度： 400像素；填充-top : 100 px；}/style/head dydiv class=' DD ' canvas id=' clock '高度=' 400 px '宽度=' 400 px '你的浏览器不支持canvas/canvas/div脚本类型=' text/JavaScript '(function(doc){ var can=doc。getelementbyid(' clock ')；var con=can。GetContext(' 2d ')；//创建一个2d上下文con.translate(200，200)；//重新确定坐标原点（确定圆心位置) //外圆con . BeginPath()；con.fillStyle=' # fffcon.arc(0，0，200，0，数学* 2，假);con . fill()；//内圆con . BeginPath()；con . FillStyle=' # aaaccon . arc(0，0，195，0，数学* 2，假);con . fill()；//绘制刻度con . BeginPath()；con.font='bold 20px无衬线字体；con.textAlign=' centercon。文本基线='中间' con . FillStyle=' # 000000con.fillText('12 '，0，-170)；con.fillText('3 '，170，0)；con.fillText('6 '，0，170)；con.fillText('9 '，-170，0)；con.fillText('1 '，84，-147.224)；con.fillText('2 '，147.224，-84)；con.fillText('4 '，147.224，84)；con.fillText('5 '，84，147.224)；con.fillText('7 '，-84，147.224)；con.fillText('8 '，-147.224，84)；con.fillText('10 '，-147.224，-84)；con.fillText('11 '，-84，-147.224)；//获取当前时间var d=新日期(),时间={ };时间到了h=d.gethours()；时间到了m=d . GetMINUTES()；时间到了s=d . getseconds()；函数getTime(){ time .s；如果（时间第59章)时间s=0；时间到了m。如果（时间M . 60){ 0时间m=0；时间到了h .如果（时间H 11){ 0时间h=0；} } } canvasTimeLine()；} //将角度转为弧度函数numToDeg(num){ return((num * 6-90)* 0.01744444444444)；} //确定刻度位置函数computePositionByLenDeg(len，deg){ return { x : len * math。cos(deg)，y : len * math。sin(deg)}//绘制刻度函数canvasLineMintus(){ for(var I=0；i60I){ var rec=180；con . BeginPath()；线宽=4；如果(i%5！=0){ con .线宽=1；rec=184 } var beinDeg=numToDeg(i)，开始pot=computePositionByLenDeg(rec，beinDeg)，结束pot=computePositionByLenDeg(190，beinDeg)；con.moveTo(beginPot.x，beginPot。y)；con.lineTo(endPot.x，endPot。y)；冲程()；} }函数canvasTimeLine(){ var sDeg=NumTodeg(time .s)，mDeg=numToDeg(时间. m)，hDeg=numToDeg(时间H*5数学。地板（时间. M/12))，sPot=computePositionByLenDeg(150，sDeg)，mPot=computePositionByLenDeg(135，mDeg)，hPot=computePositionByLenDeg(110，hDeg)；//时钟表面con . BeginPath()；con.fillStyle=' # dddcon.arc(0，0，156，0，数学* 2，假);con . fill()；//时针con . BeginPath()；con.moveTo(0，0)；con.lineTo(hPot.x，hPot。y)；线宽=6；con.strokeStyle=' # 333con。笔画()；//分针con . BeginPath()；con.moveTo(0，0)；con.lineTo(mPot.x，mPot。y)；线宽=4；con.strokeStyle=' # 333con。笔画()；//秒针con . BeginPath()；con.moveTo(0，0)；con.lineTo(sPot.x，sPot。y)；线宽=2；con.strokeStyle=' # ff0000con。笔画()；//针心con . BeginPath()；con . FillStyle=' # aaaaaaacon . arc(0，0，8，0，数学* 2，假);con . fill()；con . BeginPath()；con.fillStyle=' # f00con.arc(0，0，4，0，数学* 2，假);con . fill()；} canvasLineMintus()；getTime()；setInterval(getTime，1000)；})(文档);/脚本/正文/html更多Java脚本语言时钟特效点击查看：JavaScript时钟特效专题

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