使用canvas绘制动态钟表,canvas制作图表
本文介绍了帆布如何绘制钟表的方法，分享给大家，具体如下：
效果图为
上代码：
var canvas=文档。getelementbyid(“canvas”)；var CTX=画布。获取上下文(“2d”)；变量年、月、日、小时、秒、分钟；//绘制表盘函数drawClockPie(){ CTX。begin path()；CTX。线宽=2；CTX . stroke style= # 333 CTX . arc(150，150，146，0，2 *数学.)；CTX。笔画()；CTX。关闭路径()；CTX。begin path()；ctx.arc(150，150，6，0，2 *数学.)；ctx.fillStyle= redCTX。fill()；CTX。关闭路径()；}//绘制时刻度函数drawClockHours(){ for(var i=0，l=12i 12I){ CTX。save()；ctx.translate(150，150)；CTX。旋转(I * 1/12 * 2 *数学.)；CTX。begin path()；CTX。线宽=5；CTX . stroke style= # 333 CTX . move to(0，-140)；ctx.lineTo(0，-125)；CTX。笔画()；CTX。关闭路径()；CTX。restore()；}}//绘制分刻度函数drawClockMins(){ for(var i=0，l=60i 60I){ CTX。save()；ctx.translate(150，150)；CTX。旋转(I * 1/60 * 2 *数学.)；CTX。begin path()；CTX。线宽=3；CTX . stroke style= # 333 CTX . move to(0，-140)；ctx.lineTo(0，-133)；CTX。笔画()；CTX。关闭路径()；CTX。restore()；}}//绘制时针函数画hourpin(){ CTX。save()；ctx.translate(150，150)；ctx.rotate(小时*60*60分钟*60秒)/(12 * 60 * 60)* 2 *数学.)；CTX。begin path()；ctx.strokeStyle= # 333CTX。线宽=3；ctx.moveTo(0，0)；ctx.lineTo(0，-40)；CTX。笔画()；CTX。关闭路径()；CTX。restore()；}//绘制分针函数drawMinPin(){ CTX。save()；ctx.translate(150，150)；ctx.rotate(分*60秒)/(60 * 60)* 2 *数学.)；CTX。begin path()；ctx.strokeStyle= # 333CTX。线宽=2；ctx.moveTo(0，0)；ctx.lineTo(0，-60)；CTX。笔画()；CTX。关闭路径()；CTX。restore()；}//绘制秒针函数drawSecPin(){ CTX。save()；ctx.translate(150，150)；ctx.rotate(秒/60 * 2 *数学.)；CTX。begin path()；ctx.strokeStyle= redCTX。线宽=1；ctx.moveTo(0，0)；ctx.lineTo(0，-80)；CTX。笔画()；CTX。关闭路径()；CTX。restore()；}//绘制时间文字函数drawText(){ hour=hour=12？小时- 12:小时；var time=现在是年份年月份月"日"日"小时"时分钟分第二秒；ctx.font=15px黑体；ctx.fillText(时间，24350);}//获取时间函数get times(){ var Date=new Date()；年份=日期。get full year()；月=日期。getmonth()1；日=日期。getdate()；小时=日期。get hours()；分钟=日期。get minutes()；秒=日期。获取秒数()；} setInterval(function(){ CTX。clear rect(0，0，600，600)；drawClockPie()；绘制时钟小时数()；drawClockMins()；get times()；drawText()；绘制hourpin()；drawMinPin()；drawSecPin()；},1000);注：
当然时间也可以不用这样每隔一秒就获取，直接获取一次按秒递增就行。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。