html5时钟代码免费,html5电子时钟代码
您需要了解的内容：
画布标签只是图形容器，你必须使用脚本来绘制图形。默认大小：300px宽，150px高；
getContext()方法可以返回一个对象，该对象提供在画布上进行绘制的方法和属性。3354获取上下文对象。
GetContext(2d )对象属性和方法，可用于绘制文本、线条、矩形、圆形等。在画布上。
Rect (L，T，W，H):默认颜色是黑色strokeRect(l，T，W，H):一个带边框的正方形。默认单像素黑色边框
setInterval()方法可以在指定的时间段(以毫秒为单位)调用函数或计算表达式。
BeginPath():定义开始绘制路径，将当前点设置为(0，0)。当第一次创建画布环境时，beginPath()
将显式调用该方法。
ClosePath():结束绘制路径(连接起点和终点)
画一个圆：
圆弧(x，y，半径，起始弧度，结束弧度，旋转方向)
x，y:起始位置
弧度和角度的关系：弧度=角度*数学。圆周率/180
旋转方向：顺时针(默认：假，逆时针：真)
代码：
XML/HTML代码将内容复制到剪贴板！doctype html html lang= en-US head meta charset= UTF-8 title/title脚本window . onload=function(){ varoC=document . getelementbyid( ch1 )；varoGC=oc . get context( 2d )；functiondrawClock(){ varx=200；//指定坐标vary=200varr=150//指定时钟半径OGC.clearrect (0，0，oc.width，oc . height)；//清空画布varotate=new date()；//创建日期对象varo hours=OTA . get hours()；//Get time varo min=OTA . Get minutes()；varoSen=OTA . get seconds()；varoHoursValue=(-90 oHours * 30 oMin/2)* Math。PI/180；//设置时针的数值varomin value=(-90 omin * 6)* math.pi/180; varosen value=(-90 oSen * 6)* Math。PI/180；OGC . begin path()；//start for(vari=0；i60I ){//i为60，代表时钟oGC.moveTo(x，y)的60个小刻度；oGC.arc(x，y，r，6*i*Math。PI/180，6 *(I 1)*数学。PI/180，假)；//从6度到12度循环} OGC . close path()；OGC . stroke()；oGC.fillStyle= white//覆盖小尺度的黑线OGC . begin path()；oGC.moveTo(x，y)；oGC.arc(x，y，r*19/20，0，360*(i 1)*Math。PI/180，假)；OGC . close path()；//End OGC . fill()；OGC . line width=3；//设置时钟盘tick oGC.beginPath()的厚度值；//开始为(i=0画一个大的时钟刻度；i12I ){//i为12，代表时钟刻度的12格oGC.moveTo(x，y)；oGC.arc(x，y，r，30*i*Math。PI/180，30 *(I 1)*数学。PI/180，假)；//间隔30度，弧度=角度*数学。PI/180 } OGC . close path()；OGC . stroke()；oGC.fillStyle= white//黑线oGC.beginPath()覆盖大尺度；oGC.moveTo(x，y)；oGC.arc(x，y，r*18/20，360*(i 1)*Math。PI/180，假)；OGC . close path()；OGC . fill()；//拨号完成OGC . line width=5；//设置时针宽度OGC . begin path()；//开始画时针oGC.moveTo(x，y)；oGC.arc(x，y，r*10/20，oHoursValue，oHoursValue，false)；//设置时针大小和弧度OGC . close path()；OGC . stroke()；OGC . line width=3；//设置分针宽度OGC . begin path()；//开始画分针oGC.moveTo(x，y)；oGC.arc(x，y，r*14/20，oMinValue，oMinValue，false)；//设置分针大小和弧度OGC . close path()；OGC . stroke()；OGC . line width=1；//设置秒针的宽度OGC . begin path()；//开始画秒针oGC.moveTo(x，y)；oGC.arc(x，y，r*19/20，oSenValue，oSenValue，false)；//设置秒针大小和弧度OGC . close path()；OGC . stroke()；} setInterval(drawClock，1000)；//设置定时器，使时钟运行draw clock()；};/script/head body canvas id= ch1 width= 400 px height= 400 px /canvas/body/html单击下面的结果查看演示：
http://jsfiddle.net/eh02450b/2/
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。