本文实例为大家分享了帆布时钟效果展示的具体代码，供大家参考，具体内容如下

html lang=' en ' head meta charset=' UTF-8 ' title/title style canvas { display : block；margin: 0自动背景-color : # fdffad；border: 1px固体# 000;}/样式脚本类型=' text/JavaScript '文档。addevent listener(' DOMContentLoaded '，function(){ var oC=document。query selector(' canvas ')；var GD=oc。GetContext(' 2d ')；var r=oc。宽度/2；函数绘制背景(){ GD。save()；//渐变var ra=GD。createlinegradient(600，0，400，0)；ra.addColorStop(1 '，# 2d d9ff ')；ra.addColorStop(0 '，# 8c 48 DD ')；//表盘gd.translate(r，r)；GD。begin path()；GD . fillstyle=ragd . line width=10gd . strokestyle=' # 211 F4 EGD . arc(0，0，r-5，0，数学* 2，假);GD。fill()；GD。笔画()；//数字for(var I=1；13i ) { var rad=i * Math .PI * 2/12；var x=数学。sin(rad)*(r-70)；var y=-数学。cos(rad)*(r-70)；GD . FillStyle=' redgd . font=' bold 80px calibrid。线宽=1；GD . textalign=' center GD . text baseline=' middlegd . stroketext(I，x，y)；} //点for(var I=0；i 60I){ GD。begin path()；var rad=i *数学* 2/60；var x=数学。sin(rad)*(r-30)；var y=-数学。cos(rad)*(r-30)；if(I % 5==0){ GD。FillStyle='红色'；} else { GD。FillStyle=' # CCC ' } GD。线宽=2；gd.arc(x，y，6，0，数学* 2，假);GD。fill()；GD。笔画()；GD。close path()；} } //时针函数drawHour(h，m){ GD。save()；GD。begin path()；var rad=2 *数学/12 * h；var mrad=2 *数学PI/12/60 * m；GD。旋转(rad mrad)；GD . line width=20g d . line cap=' round GD . move to(0，10)；gd.lineTo(0，-r/3)；GD。笔画()；GD。close path()；GD。restore()；} //分针函数绘制MINUTES(m){ GD。save()；GD。begin path()；var rad=2 *数学/60 * m；GD。旋转(rad)；GD . line width=10gd . line cap=' round GD . move to(0，10)；gd.lineTo(0，-r/2)；GD。笔画()；GD。close path()；GD。restore()；} //秒针函数抽秒{ GD。save()；GD。begin path()；var rad=2 *数学/60 * s；GD。旋转(rad)；gd.fillStyle=' redgd.moveTo(-2，20)；gd.lineTo(2，20)；gd.lineTo(1，-r 100)；gd.lineTo(-1，-r 100)；GD。fill()；GD。close path()；GD。restore()；} //圆点函数绘制点(){ GD。begin path()；gd.fillStyle=' # fffgd.arc(0，0，5，数学* 2，假);GD。fill()；}函数drawCloCk(){ gd.clearRect(0，0，oC.width，oc。高度)；var oDate=新日期();var h=HuIt。gethours()；var m=HuIt。GetMINUTES()；var s=HuIt。GetSeconds()；绘制背景()；drawHour(h，m)；绘制MINUTES(m)；绘制秒；绘制点()；GD。restore()；}绘制时钟()；setInterval(drawClock，1000)；}，false)；/脚本/头部主体画布宽度='800 '高度=' 800 '/画布/主体/html效果图：

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