本文主要详细介绍文本时钟的JavaScript canvas实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享canvas实现文本时钟的具体代码，供大家参考，具体内容如下
先看效果图。
密码
！文档类型html
html lang='en '
头
meta charset='UTF-8 '
meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '
meta http-equiv=' X-UA-Compatible ' content=' ie=edge '
标题文档/标题
/头
身体
Canvas ID='我的画布' width=' 600' height=' 600 '您的浏览器不支持画布/画布
脚本
var c=document . getelementbyid(' my canvas ')；
var CTX=c . get context(' 2d ')；
ctx.translate(300，300)；
功能时钟(ctx){
this.ctx=ctx//画布2d画笔
this . h=“”；//小时
this . m=“”；//分钟
this . s=“”；//秒
this . year=“”；//年份
this . mon=“”；//月份
this . da=“”；//日期
this . day=“”；//周
this.timer=null//计时器
This.numberText=['零'，'一'，'二'，'三'，'四'，'五'，'六'，'七'，'八'，'九'，'十'，'十一'，'十二'，'十三'，'
这个。H=['零'，'一点'，'两点'，'三点'，'四点'，'六点'，'七点'，'八点'，'九点'，'十点'，'十一点'，'十二点'，'
这个。M=['零'，'一点'，'二点'，'三点'，'四点'，'五点'，'六点'，'七点'，'八点'，'九点'，'十点'，'十一点'，'十二点'，二十五、二十六、二十七、二十八、二十九、三十一、三十二、三十三、三十四、三十五、三十六、三十七和三十八。四十六、四十七、四十八、四十九、五十、五十一、五十三、五十四、五十五、五十六、五十七、五十八、五十九。
这个。S=['零秒'，'一秒'，'两秒'，'三秒'，'四秒'，'五秒'，'六秒'，'七秒'，'八秒'，'九秒'，'十秒'，'十一秒'，'十二秒'，二十五秒，二十六秒，二十七秒，二十八秒，二十九秒，三十秒，三十一秒，三十二秒，三十三秒，三十四秒，三十五秒，三十六秒，三十七秒，三十八秒。46秒，47秒，48秒，49秒，50秒，51秒，52秒，53秒，54秒，55秒，56秒，57秒，58秒，59秒】。
this.draw=function(){
this.ctx.clearRect(-300，-300，600，600)；
//中间的黑色小圆圈
this . CTX . begin path()；
this.ctx.arc(0，0，5，0，数学。PI*2，真)；
this . CTX . fill()；
this . CTX . close path()；
//画一条长水平线
this . CTX . begin path()；
this.ctx.moveTo(0，0)；
this.ctx.lineTo(280，0)；
this . CTX . stroke style=' # 000 '；
this . CTX . stroke()；
this . CTX . begin path()；
This.ctx.font='12px微软雅黑'；
var year text=“”；
var arr=String(this.year)。拆分(“”)；
for(var n=0；narr .长度；n ){
var num=Number(arr[n])；
year text=this . number text[num]；
}
var weekday=this.day===0？Sunday ':' week ' this . number ext[this . day]；//周
var Motext=this . number text[this . mon]' this . number text[this . da]'日'；
this.ctx.fillText(yearText '年',10,-10);//年份的文字
this.ctx.fillText(moText，10，20)；//月份/日期/星期的文字
this.ctx.fillText(weekday，10，40)；//月份/日期/星期的文字
这个。画时钟()；
}
//画刻度
this.drawClock=function(){
//时钟
这个。CTX。save()；//保存当前状态
this.ctx.rotate(数学12 ./12 *这个。h)；
for(var j=0；j 24j ){
这个。CTX。begin path()；
var color=j===this.h？# 000 ':' # CCC '；
这个。CTX。笔画风格=颜色；
this.ctx.font='12px微软雅黑；
this.ctx.strokeText(this .H[j]，110，-5)；
这个。CTX。关闭路径()；
this.ctx.rotate(-Math .PI/12)；
}
这个。CTX。restore()；//恢复到上一次的状态
//分钟
这个。CTX。save()；
this.ctx.rotate(数学100 ./30 *这个。m)；
for(var I=0；i 60i ){
这个。CTX。begin path()；
var color=i===this.m？# 000 ':' # CCC '；
这个。CTX。笔画风格=颜色；
this.ctx.strokeText(this .M[i]，170，-5)；
这个。CTX。关闭路径()；
this.ctx.rotate(-Math .PI/30)；
}
这个。CTX。restore()；
//秒钟
这个。CTX。save()；
this.ctx.rotate(数学100 ./30 *这个。s)；
for(var k=0；k60k ){
这个。CTX。begin path()；
var color=k===this.s？# 000 ':' # CCC '；
这个。CTX。笔画风格=颜色；
this.ctx.strokeText(this .S[k]，230，-5)；
这个。CTX。关闭路径()；
this.ctx.rotate(-Math .PI/30)；
}
这个。CTX。restore()；
//ctx.rotate(-Math ./30 *这个。s)；
}
//初始化
this.init=function(){
变那个=这个
这个。timer=setInterval(function(){
那个。settime()；
那个。draw()；
},100);
}
//停止
this.stop=function(){
清除间隔(这个。定时器)；
this.timer=null
}
//设置时间
this.setTime=function(){
var Date=new Date()；
这个。年份=日期。get full year()；//年，int
这个。mon=日期。获取月份()1；//月分，int
这个。da=日期。getdate()；//日期，int
这个。日=日期。getday()；//星期，int
var小时=日期。get hours()；//时，int
var minu=日期。get minutes()；//分，int
变量秒=日期。获取秒数()；//秒，int
//毫秒数/1000 ,这里主要是为了做帧动画
var减去cond=日期。get毫秒()/1000；
定义变量秒；//秒，计算秒旋转的角度，浮动
定义变量分钟；//分，计算分钟的角度，浮动
var ho//小时，计算小时的角度，浮动
如果(次0.8){
秒=数学。ceil(秒减秒)；
秒=秒=60?0:秒；
}否则{
秒=秒
}
//秒钟到了59,分钟要过渡
if(sec===59) {
if(minuScond=0.8){
分钟=数学。ceil(分减秒)；
分钟=分钟=60?0:分钟；
}否则{
分钟=分钟
}
}否则{
分钟=分钟
}
//秒数到了59和分钟数到了59;时针要过渡
如果(秒===59分钟===59){
if(minuScond=0.8){
ho=Math.ceil(小时分秒);
ho=ho=24？0:ho；
}否则{
ho=小时分秒；
}
}否则{
ho=小时；
}
this.h=ho//小时
this.m=分钟；//分钟
this.s=秒；//秒钟
}
}
var时钟=新时钟(CTX)；
时钟。init()；
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。