时钟渲染：

闲着无聊做一个网页时钟，效果模拟传统时钟的运行模式，

用html画布实现指针，背景图片指网络图片。

具体原则：

首先，将时钟分成四个不同的区域，并为每个区域计算cos和sin，以确定指针的顶点位置。在画布上绘制指针。传统机械手的动态跳动是通过setInterval每秒刷新指针位置来实现的。

本人是JS开发程序员，工作1年多。闲置无聊的简单页面，

欢迎您提出问题或建议。共同进步

代码部分，可以通过直接从HTML文件中复制来看到效果：

！DOCTYPE html html head meta charset=utf-8 title clock/title/head body style=' color : green；-背景图像： URL(' http://图像。LX方式。com/upload/b/F0/bf0 d 97 dcee 487096548 E6 edbc 89d 4963 _ thumb。png ')；-背景-尺寸：100%;背景-重复：不重复；背景-附件：固定' div style='宽度： 900 px高度： 900像素；边距-top : 50px；边距-左left : 50px ' div style=' position :绝对值；left:119pxtop: 193px宽度： 900像素；高度： 900像素；背景图像： URL(' http://图像。LX方式。com/upload/b/F0/bf0 d 97 dcee 487096548 E6 edbc 89d 4963 _ thumb。png ')；背景-重复：不重复；z指数：-1；/div canvas id=' t ' width=' 800 ' height=' 800 '/canvas div style=' position : absolute；left:118pxtop: 464px宽度： 100像素；高度： 200像素；背景-颜色：白色；背景-重复：不重复；z指数：10 '/div /div脚本语言=' JavaScript ' var s=set interval(moveI，1000)；函数moveI(){ var c=document。getelementbyid(' t ')；var PC=c . GetContext(' 2d ')；身高=身高；//秒个人电脑。线宽=3；pc.strokeStyle='rgba(255，0，0，0.8)'；var now=新日期();var sindex=getxy(150，现在。getseconds())；pc.moveTo(400，400)；pc.lineTo(sindex.x，sindex。y)；个人电脑。中风();个人电脑。begin path()；//分个人电脑。线宽=7；pc.strokeStyle='rgba(50，50，50，0.8)'；var mindex=getxy(120，现在。getminutes()(现在。getseconds()/60))；pc.moveTo(400，400)；pc.lineTo(mindex.x，mindex。y)；个人电脑。中风();个人电脑。begin path()；//时PC . line width=10pc . strokestyle=' rgba(0，0，0，0.8)'；var hindex=getxy(80，((现在。gethours())12？现在。gethours()-12 :现在。gethours())(现在。getminutes()/60))* 5)；pc.moveTo(400，400)；pc.lineTo(hindex.x，hindex。y)；个人电脑。中风();};函数getxy(r，t) { //计算分区0，1，2，3 var a=ParSeint(t/15)；//分区角度t=t-15 * a；var y；var x；//基于分区的坐标计算开关(a){ case 0:y=r-(r * Math。cos(2 *数学.PI/360 * 90 *(t/15))；x=r (r *数学。罪恶(2 *数学PI/360 * 90 *(t/15))；打破；案例1: y=r (r *数学. sin(2 *数学.PI/360 * 90 *(t/15))；x=r (r *数学. cos(2 *数学.PI/360 * 90 *(t/15))；打破；案例2: y=r (r *数学. cos(2 *数学.PI/360 * 90 *(t/15))；x=r - (r *数学. sin(2 *数学.PI/360 * 90 *(t/15))；打破；案例3: y=r - (r *数学. sin(2 *数学.PI/360 * 90 *(t/15))；x=r - (r *数学. cos(2 *数学.PI/360 * 90 *(t/15))；打破；default : break } y=(400-r)y；x=(400-r)x；返回{ 'x': x，' y ' :y }；};/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。