HTML5实现可扩展的时钟代码。
废话没多说，直接给大家粘上代码，具体代码如下所示：canvas_time
{ div
文本对齐：中心；
边距：250px；
}
{ #时钟
边境：1px solid # cccccc；
}
VaR DOM = document.getelementbyid（开始的）；
VaR CTX = dom.getcontext（二维的）；
VaR的宽度= ctx.canvas.width；
VaR高度= ctx.canvas.height；
var =宽度 2；
var =宽度 200；
功能drawbackground（）{
（CTX保存）；当前存储环境变量；
ctx.translate（R，R）； / /复位坐标R，R
(ctx.beginPath); / / start a path
ctx.linewidth = 10 * REM； / /设置线宽10；
Ctx.arc（0, 0，R ctx.linewidth / 2, 0, 2 * Math.PI，假）；
Ctx.stroke（）；
无功hournumbers = { 3, 4, 5，6, 7, 8，9, 10, 11，12, 1, 2 }； / /定义数组
ctx.font = 18 *雷+PX宋体；
ctx.textalign =中心；
ctx.textbaseline =中间；
hournumbers.foreach（功能（数量、我）{
VaR的RAD = 2 * 12 *我math.pi /；
var x = math.cos（RAD）*（R - 30 * REM）；
var y = Math.sin（RAD）*（R - 30 * REM）；
Ctx.fillText（数，x，y）；
}）；
对于（var i = 0；i < 60；i + +）{
VaR的RAD = 2 * 60 *我math.pi /；
var x = math.cos（RAD）*（R - 18 * REM）；
var y = Math.sin（RAD）*（R - 18 * REM）；
Ctx.beginPath（）；
如果（i = 5 = 0）{
Ctx.arc（X，Y，2 * 0, 2 * Math.PI，REM，假）；
ctx.fillstyle =# 000 ；
{人}
Ctx.arc（X，Y，2 * 0, 2 * Math.PI，REM，假）；
ctx.fillstyle =# CCC；
}
Ctx.fill（）；
}
}
功能drawhour（小时、分钟）{
Ctx.save（）；
Ctx.beginPath（）；
VaR的RAD = 2 * math.pi / 12小时；
var = 2×mrad math.pi / / 60 * 12分钟；
ctx.rotate（RAD +拉德）；
ctx.linewidth = 6 * REM；
ctx.linecap =圆；
Ctx.moveTo（0, 10×REM）；
Ctx.lineTo（0，R / 2）；
Ctx.stroke（）；
Ctx.restore（）；
}
功能drawminute（分钟）{
Ctx.save（）；
Ctx.beginPath（）；
VaR的RAD = 2 * math.pi / 60分钟；
ctx.rotate（RAD）；
ctx.linewidth = 3 * REM；
ctx.linecap =圆；
Ctx.moveTo（0, 10×REM）；
Ctx.lineTo（0，R + 30 * REM）；
Ctx.stroke（）；
Ctx.restore（）；
}
功能drawsecond（二）{
Ctx.save（）；
Ctx.beginPath（）；
ctx.fillstyle ='；
VaR的RAD = 2 * math.pi / 60 *二；
ctx.rotate（RAD）；
Ctx.moveTo（2 * 20 * REM，REM）；
Ctx.lineTo（2 * 20 * REM，REM）；
Ctx.lineTo（1，R + 16 * REM）；
Ctx.lineTo（1，R + 16 * REM）；
Ctx.fill（）；
Ctx.restore（）；
}
功能drawdot（）{
Ctx.beginPath（）；
ctx.fillstyle =# FFF；
Ctx.arc（0, 0, 3 * 0, 2 *雷，Math.PI，假）；
Ctx.fill（）；
}
功能draw01（）{
ctx.clearrect（0, 0，宽度，高度）；
var现在=新日期（）；
无功功率= now.gethours（）；
VaR分钟= now.getminutes（）；
无功二= now.getseconds（）；
drawbackground（）；
DrawHour（小时、分钟）；
DrawMinute（分钟）；
drawsecond（二）；
DrawDot（）；
Ctx.restore（）；
}
draw01（）；
setInterval（draw01，1000）；
总结
以上是一个小体积的HTML5引入到你实现可扩展的时钟代码，希望对你有帮助，如果您有任何问题，请给我留言，萧边会及时回复您。谢谢您支持网站。