js html5实现画布绘制网页时钟的方法

本文给出了一个用js html5用画布绘制网页时钟的例子。这是一个可以用于网页的钟摆，它的大小和位置可以通过按钮来调整。具体实施内容如下。

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title clock/title script type=' text/JavaScript ' var xClock=300；//表心位置var yClock=250//表心位置var d=180.0//钟表圆面的半径定义变量值=-d * 1.07；函数放大(){ d；}函数reduce(){ d-；}函数west ward(){ var c=文档。getelementbyid('我的画布')；var g2d=c . GetContext(' 2d ')；g2d.translate(-1，0)；//置坐标轴原点于表心c=文档。GetElementBYid(' MyStream ')；g2d=c . GetContext(' 2d ')；g2d.translate(-1，0)；//置坐标轴原点于表心}函数东沃德(){ var c=文档。getelementbyid('我的画布')；var g2d=c . GetContext(' 2d ')；g2d.translate(1，0)；//置坐标轴原点于表心c=文档。GetElementBYid(' MyStream ')；g2d=c . GetContext(' 2d ')；g2d.translate(1，0)；//置坐标轴原点于表心}函数up(){ var c=document。getelementbyid('我的画布')；var g2d=c . GetContext(' 2d ')；g2d.translate(0，-1)；//置坐标轴原点于表心c=文档。GetElementBYid(' MyStream ')；g2d=c . GetContext(' 2d ')；g2d.translate(0，-1)；//置坐标轴原点于表心}函数下载(){ var c=文档。getelementbyid('我的画布')；var g2d=c . GetContext(' 2d ')；g2d.translate(0，1)；//置坐标轴原点于表心c=文档。GetElementBYid(' MyStream ')；g2d=c . GetContext(' 2d ')；g2d.translate(0，1)；//置坐标轴原点于表心}函数fillPolygon(a，b，fillColor，CTX){ CTX。begin path()；ctx.moveTo(a[0]，b[0])；for(var j=1；ja.lengthj )ctx.lineTo(a[j]，b[j])；CTX。close path()；ctx.fillStyle=fillColorCTX。fill()；}函数randomColor(){ var s=' # '；for(var I=0；i3；I)s=数学。地板(数学。random()* 16).toString(16)；返回s；}函数定位坐标(){ var c=文档。getelementbyid('我的画布')；var g2d=c . GetContext(' 2d ')；g2d.translate(xClock，yClock)；//置坐标轴原点于表心var c=文档。getelementbyid(' myshorth ')；var g2d=c . GetContext(' 2d ')；g2d.translate(xClock，yClock)；//置坐标轴原点于表心}函数drawFace(){ //定义画钟表表面drawFace方法/* 表示1,2,4,5,7,8,10,11点钟位置的较小尺寸的菱形标志顶点坐标数组*/var x=新数组(0，数学。回合(d/30)，0，数学。回合(-d/30))；var y=新数组(Math.round(-d*1.07)，-d，Math.round(-d*0.9)，-d)；/* 表示3,6,9,12点钟位置的较大尺寸的菱形标志顶点坐标数组*/var x1=新数组(0，数学。回合(d/15)，0，数学。回合(-d/15))；var y1=新数组(Math.round(-d*1.13)，-d，Math.round(-d*0.9)，-d)；var c=文档。getelementbyid('我的画布')；var g2d=c . GetContext(' 2d ')；//下面开始准备画钟表圆面边g2d。begin path()；g2d.arc(0，0，d，0，2 *数学.PI)；g2d.strokeStyle=' lightGrayg2d。线宽=d/18；g2d。笔画()；//最后一笔，画钟表圆面边//下面开始准备画表示每个钟点的菱形for(var I=0；i12I){//用于循环语句的循环体开始if (i%3==0){ //画较大尺寸的红色菱形，表示3,6,9,12点fillPolygon(x1，y1 '红色，g2d)；} else {//画较小尺寸的桔黄色菱形，表示其余的钟点fillPolygon(x，y，' orange '，g2d)；}//以钟表表心为原点，坐标系顺时针转动30度，以便画下一个钟点位置的菱形标记g2d.rotate(数学. PI/6.0)；}//用于循环语句的循环体结束}//画钟表表面drawFace方法结束/* 定义画钟表的时针、分针、和秒针的方法牵引针*形参赫拉迪人，单位弧度，为时针从0点算起的弧度位置，* 形参Mradian，单位弧度，为分针从0分算起的弧度位置，* 形参斯拉迪安，单位弧度，为秒针从0秒算起的弧度位置。

*/function draw pines(Hradian、Mradian、Sradian){ var c=document . getelementbyid(' my canvas ')；var g2d=c . GetContext(' 2d ')；//以时钟中心为原点，顺时针转动坐标系按Hradian弧度绘制时针g2d . rotate(Hradian)；//坐标数组varhx=newarray (0，数学。圆(d/19)，0，数学。回合(-d/19))；var Hy=新数组(Math.round(-d/2)、Math.round(-d/3)、0、math . round(-d/3))；fillPolygon(Hx，Hy，'洋红色'，g2d)；//时针设置为紫红色。//以时钟中心为原点，将坐标系逆时针旋转Hradian弧度，恢复坐标系g2d . rotate(-Hradian)；//以时钟中心为原点，将坐标系顺时针旋转Mradian的弧度，画出分针g2d . rotate(Mradian)；//坐标数组varmx=newarray(数学。四舍五入(-d/19)，0，数学。圆桌会议(d/19))；var My=新数组(0，Math.round(-d/1.3)，0)；fillPolygon(Mx，My，' gray '，g2d)；//分针设置为灰色。//以时钟中心为原点，将坐标系逆时针旋转Mradian的弧度，恢复坐标系g2d . rotate(-Mradian)；//以时钟中心为原点，顺时针转动坐标系统，转Sradian的弧度，画出秒针g2d . rotate(s radian)；//秒针设置为随机颜色g2d.strokeStyle='绿色'；g2d.lineWidth=' 1g2d.moveTo(0，0)；g2d.lineTo(0，math . round(-d/1.1))；g2d . stroke()；g2d . BeginPath()；g2d.arc(0，Math.round(-d)，d/18，0，2*Math。PI)；g2d . fillstyle=randomColor()；g2d . fill()；//最后一击，在秒针顶点处画出球。//将坐标系逆时针旋转Sradian的弧度，以恢复坐标系g2d . rotate(-Sradian)；}//手绘方法drawing的代码块结束/*画一个字符串表示瞬时时间*/函数drawin time(){ vartime=new date()；//获取当前时间。var hour=time . gethours()；//获取小时var分钟=time . getminutes()；//获取分钟var second=time . getseconds()；//获取秒var apm=' AM//默认显示早晨：am . var canvas=document . getelementbyid(' my canvas ')；var g2d=canvas . getcontext(' 2d ')；如果(小时12){ //根据12小时停止显示，小时=小时-12；apm=' PM} if(minute10){ //如果一分钟只有一个数字，则0的补码显示minute='0 '分钟；} if(second10){ //如果秒只有一位数字，则秒='0 '秒将通过补0显示；} g2d.clearRect(-xClock，-yClock，600，600)；//清屏var s=小时' : '分钟' : '秒' : ' APMg2d.fillStyle=' redg2d . font=d/4 ' px KAITI '；g2d.fillText(s，-d/1.8，d * 1.4)；G2d.font=d/4 'px楷书'；//Create gradient var gradient=g2d . createlinegradient(0，0，canvas.width，0)；gradient.addColorStop('0 '，'洋红色')；gradient.addColorStop('0.5 '，' blue ')；gradient.addColorStop('1.0 '，' red ')；//填充gradientg2d.fillStyle=渐变；G2d.fillText('大数据'，-d/2.6，d/2)；//获取实例创建瞬间的二读，计算秒针。相对于0秒，电弧读数var c=Math.PI/30 *秒；//获取创作瞬间的分针读数，然后计算分针。相对于0，弧读数var b=Math.PI/30 *分钟；/*获取创建瞬间的小时读数，计算时针相对于0点的弧线读数。

* 时针走过的弧度为整点的度数（每小时走30度),加上走过分钟数的修正值*/var a=数学PI/180*(30 *小时分钟/2);/* 坐标系平移(xClock，yClock)，使得坐标轴成为表盘中心*/draw face()；牵引针(a、b、c)；} //方法时代汇创的代码块结束var I=0；function shuttle(){//shuttle _ bobvar即时角度=new Array(64，61，56，49，40，29，16，3，-8，-16，-29，-40，-49，-56，-61，-64，-64，-64，-61，-56，-49，-40，-29，-16，-8，3，16，29，40，49，56，61，64，64)；//摆的即时角度数组var c=文档。getelementbyid(' myshorth ')；var CTX=c . GetContext(' 2d ')；定义变量瞬时角度[我%瞬时角度。长度]*数学/180；ctx.clearRect(-300，-300，900，900)；CTX。旋转(alpha)；//秒针设为随机颜色CTX . fillstyle=' brownctx . fill rect(-3，0，6，d * 1.4)；CTX . shadow blur=20 CTX . shadow color=' black CTX . FillStyle='蓝色；//ctx.fillRect(-d/3.5，d*1.35，d/1.6，d/4.4)；ctx.font='40px楷体；//创建渐变var渐变=CTX。createlinegradient(0，0，c.width，0)；gradient.addColorStop('0 '，'洋红色');gradient.addColorStop('0.5 '，' blue ')；gradient.addColorStop('1.0 '，' white ')；//用渐变填充//CTX。fillstyle=渐变；CTX . FillStyle=' red ' CTX . FillText('大数据，-d/3.2，d * 1.55)；CTX。阴影模糊=0；CTX . ShadowColor=nullCTX . FillStyle=nullCTX。旋转(-alpha)；}函数准备(){ locateCoordinate()setInterval(' draw time()'，500)；' setInterval('摆锤()',200);}/script style # my canvas { z-index :3；位置：绝对；left :0 pxtop :0 px } # MyStream { z-index :2；位置：绝对；left:0pxtop:0px} #控制面板{位置：绝对值；left:600pxtop:0px宽度宽度：100像素文本对齐：居中；字体系列： '楷体；font-size :20 px字体粗细：加粗；color : # 6c 0 }/style/head body OnLoad=' preparence()' canvas id=' my canvas ' width=' 600 ' height=' 600 ' pYour浏览器不支持帆布元素！/p/canvascanvascanvascanvas id=' myshuttle ' width=' 600 ' height=' 600 ' pYour浏览器不支持帆布元素！/p/canvasdiv id='控制面板'表RTD控制/tdtd按钮/TD/trtdinput值='增大type=' button ' onclick=放大()'/按钮/TDT输入值='缩小type=' button ' onclick=' reduce()'/button/TD/tr TRT输入值='左移type=' button ' onclick=' west ward()'/button/TDT输入值='右移type=' button ' onclick=' east ward()'/button/TD/tr TRT输入值='上移type=' button ' onclick=' upgrade()'/button/TDT输入值='下移type=' button ' onclick=' download()'/button/TD/tr/table/div/body/html效果图：

希望这篇文章对大家的网页编程有所帮助。