js绘制圆形时钟的效果

js绘制圆形时钟的效果
这个例子为大家分享js的画布循环时钟的具体实现代码，供大家参考，具体内容如下

帆布的时钟
div {
文本对齐：中心；
边距：250px；
}
#钟{

边境：1px solid # CCC；
}

js
VaR DOM = document.getelementbyid（开始的）；
VaR CXT = dom.getcontext（2D）；
VaR的宽度= cxt.canvas.width；
VaR高度= cxt.canvas.height；
var =宽度 2；

功能drawbackground（）{
Cxt.save（）；
cxt.translate（R，R）；
Cxt.beginPath（）；
CXT线宽= 10；
Cxt.arc（0,0，r-5,0,2 * Math.PI，假）；
Cxt.stroke（）；
CXT。字体=18px宋体；
CXT .TextAlign = 'center。
CXT textbaseline =。
无功hournums = { 3,4,5,6,7,8,9,10,11,12,1,2 }；
hournums.foreach（功能（数量、我）{

var = 2 *数学。12；
Var x=Math.cos (RAD) * (r-30);
var y = Math.sin（RAD）*（R-30）；
Cxt.fillText（数，x，y）；

}）；

对于（var i = 0；i < 60；i + +）{

var = 2 *数学。60；
var x = math.cos（RAD）*（R-18）；
var y = Math.sin（RAD）*（R-18）；
Cxt.beginPath（）；
如果（i = 5 = 0）{
CXT。fillStyle =# 000
Cxt.arc（X，Y，2,0,2 * Math.PI，假）；
}
别的{
CXT。fillStyle =# CCC
Cxt.arc（X，Y，2,0,2 * Math.PI，假）；
}
Cxt.fill（）；
}

}

功能drawhour（小时、分钟）{
Cxt.save（）；
Cxt.beginPath（）；
var = 2 *数学。12小时；
VaR mrad = 2 *数学。π/ 12 / 60分钟
cxt.rotate（RAD +拉德）；
CXT线宽= 6；
CXT的线帽=跟着。
Cxt.moveTo（0）；
Cxt.lineTo（0，R / 2）；
Cxt.stroke（）；
Cxt.restore（）；
}

功能drawminute（分钟）{
Cxt.save（）；
Cxt.beginPath（）；
VaR的RAD = 2 *数学。PI / 60分钟；
cxt.rotate（RAD）；
CXT线宽= 3；
CXT的线帽=跟着。
Cxt.moveTo（0）；
Cxt.lineTo（0，R + 30）；
Cxt.stroke（）；
Cxt.restore（）；
}

功能drawsecond（二）{
Cxt.save（）；
Cxt.beginPath（）；
CXT。fillStyle =# c14543
2＝60；
cxt.rotate（RAD）；
Cxt.moveTo（- 20）；
Cxt.lineTo（20）；
Cxt.lineTo（1，R + 18）；
Cxt.lineTo（1，R + 18）；
Cxt.fill（）；
Cxt.restore（）；
}

功能drawdot（）{

Cxt.beginPath（）；
CXT。fillStyle =# FFF
Cxt.arc（0,0,3,0,2 * Math.PI，假）；
Cxt.fill（）；
}

函数绘图（）{

cxt.clearrect（0,0，宽度，高度）；
var现在=新日期（）；
无功功率= now.gethours（）；
VaR分钟= now.getminutes（）；
无功二= now.getseconds（）；
drawbackground（）；
DrawHour（小时、分钟）；
DrawMinute（分钟）；
drawsecond（二）；
DrawDot（）；
Cxt.restore（）；
}
拉（）；
setInterval（画，1000）；

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。

tag：绘制时钟效果电脑软件js

相关内容