html5绘制一个时钟,css时钟动画
画布id= clock width= 500 height= 500 style= background-color:yellow /画布
复制代码代码如下：
var clock=文档。getelementbyid(“clock”)；
var cxt=时钟。获取上下文(“2d”)；
函数drawNow(){
var now=new Date()；
var hour=现在。get hours()；
var min=现在。get minutes()；
var sec=现在。获取秒数()；
hour=hour12？小时-12:小时；
小时=小时最小值/60;
//表盘（蓝色)
cxt.lineWidth=10
cxt.strokeStyle=blue
cxt。begin path()；
cxt.arc(250，250，200，0，360，false)；
cxt。关闭路径()；
cxt。笔画()；
//刻度
//时刻度
for(var I=0；i12i ){
cxt。save()；
cxt。线宽=7；
cxt.strokeStyle= black
cxt.translate(250，250)；
cxt.rotate(i*30*Math .PI/180)；//旋转角度角度*数学。圆周率/180=弧度
cxt。begin path()；
cxt.moveTo(0，-170)；
cxt.lineTo(0，-190)；
cxt。关闭路径()；
cxt。笔画()；
cxt。restore()；
}
//分刻度
for(var I=0；i60i ){
cxt。save()；
//设置分刻度的粗细
cxt。线宽=5；
//重置画布原点
cxt.translate(250，250)；
//设置旋转角度
cxt.rotate(i*6*Math .PI/180)；
//画分针刻度
cxt.strokeStyle= black
cxt。begin path()；
cxt.moveTo(0，-180)；
cxt.lineTo(0，-190)；
cxt。关闭路径()；
cxt。笔画()；
cxt。restore()；
}
//时针
cxt。save()；
//设置时针风格
cxt。线宽=7；
cxt.strokeStyle= black
cxt.translate(250，250)；
cxt.rotate(小时* 30 *数学./180)；
cxt。begin path()；
cxt.moveTo(0，-140)；
cxt.lineTo(0，10)；
cxt。关闭路径()；
cxt。笔画()；
cxt。restore()；
//分针
cxt。save()；
cxt。线宽=5；
cxt.strokeStyle= black
//设置异次元空间分针画布的中心
cxt.translate(250，250)；
cxt.rotate(最小* 6 *数学./180)；
cxt。begin path()；
cxt.moveTo(0，-160)；
cxt.lineTo(0，15)；
cxt。关闭路径()；
cxt.stroke()
cxt。restore()；
//秒针
cxt。save()；
//设置秒针的风格
//颜色：红色
cxt.strokeStyle= red
cxt。线宽=3；
//重置原点
cxt.translate(250，250)；
//设置角度
//cxt.rotate(330*Math .PI/180)；
cxt.rotate(秒* 6 *数学./180)；
cxt。begin path()；
cxt.moveTo(0，-170)；
cxt.lineTo(0，20)；
cxt。关闭路径()；
cxt。笔画()；
//画出时针，分针，秒针的交叉点
cxt。begin path()；
cxt.arc(0，0，5，0，360，false)；
cxt。关闭路径()；
//设置填充
cxt.fillStyle= gray
cxt。fill()；
//cxt。stroke style= red
cxt。笔画()；
//画出秒针的小圆点
cxt。begin path()；
cxt.arc(0，-140，5，0，360，false)；
cxt。关闭路径()；
//设置填充
cxt.fillStyle= gray
cxt。fill()；
//cxt。stroke style= red
cxt。笔画()；/PP cxt。restore()；/pp}
函数drawClock(){
cxt.clearRect(0，0，500，500)；
立即绘制()；
}
立即绘制()；
setInterval(drawClock，1000)；
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。