canvas绘制钟表,
HTML5足够强大实现很多功能，画一个时钟只是一个小玩意。图片指针用中强的绘图图像可以实现。至于兼容性问题，网上的解决方案已经很多了。这个东东是用来玩的，不是用来做应用的，学习下画布API。
先给大家展示效果图
实现代码
复制代码代码如下：
脚本类型=文本/javascript
//![CDATA[
var time=new Date()；
var h=时间。get hours()；
var m=时间。get minutes()；
var s=时间获取秒数()；
var weekday={:星期日,星期一,星期二,星期三,星期四,星期五,星期六};
h=h？(h-)* parse int(m/):h * parse int(m/)；//时针初始位置
//=====================================
变量x=，y=，桑乐=;//x y原点秒针角度变量
函数绘制()
{
var c=文档。getelementbyid(我的画布)；
var CTX=c .获取上下文( d )；
ctx.clearRect(，c.width，c . height)；
s；//秒针
//背景
ctx.fillStyle=#eee //更改设置
ctx.globalAlpha=.
ctx.fillRect(，c.width，c . height)；//用新设置绘制矩形
//===填充（表明)原点===
CTX。begin path()；
ctx.arc(x，y，true)；
CTX。fill()；
CTX。关闭路径()；
var grd=CTX。createlineargradient(x，y，)；
grd.addColorStop(， # FF )；
grd.addColorStop(. # FF )；
grd.addColorStop(， # FF )；
ctx.fillStyle=grd
ctx.font= pt Arial
ctx.fillText(html ，)；
CTX。save()；
//时间刻度
for(var I=；我；我)
{
定义变量角度=(数学. PI *)/；
CTX。begin path()；
var b=i==i==i==i==
if(i%==){
如果(b){
ctx.fillStyle= red
半径=;
}
否则{
ctx.fillStyle= blue
半径=。
}
ctx.font= px Arial
ctx.fillText(i/==？i/，x-，y-)；//x大-右小-左y大小数字刻度
}
其他
{
ctx.fillStyle= #
半径=;
}
if(s==I)radius=radius；
ctx.arc(x，y-，radius，true)；
CTX。fill()；
transform(ctx，x，y，angle，true)；
}
CTX。restore()；
//==========================
桑乐=(数学. PI *)/* s；//秒度
CTX。save()；//时针
ctx.fillStyle= red
//CTX。stroke style= red
CTX。线宽=；
变换(ctx，x，y，(数学. PI*)/*h，true)；
sj(ctx，x，y，x-，y-，x，y-)；
CTX。restore()；
CTX。save()；//分针转动
ctx.fillStyle= blue
CTX。线宽=；
变换(ctx，x，y，(数学. PI*)/*m，true)；
sj(ctx，x，y，x-，y-，x，y-)；
CTX。restore()；
//秒针转动
CTX。save()；
ctx.fillStyle= #
变换(ctx，x，y，桑乐，真)；
sj(ctx，x，y，x-，y-，x，y-)；
CTX。restore()；
//数据整理
if(s%==){
桑乐=，s=，m；
if(m==){ //每十二分时针旋转一次
如果(m！=)h；
if(m %==)m=；
}
if(h %==)h=；
};
//*注：如果是放到外面判断分针或时针转动则满足条件时都重复会运行原因每执行一遍只有秒针在时刻变动*//
var dateString=time.getFullYear()年(time.getMonth())月 time.getDate()日工作日[时间。getday()] h:时间。get hours() m: m s: s；
document.getElementById(d ).intrahtml=日期字符串：
}
//指针三角！
sj(ctx，x，y，x，y，x，y)函数。]
/===本字幕仅供学习交流，严禁用于商业用途例===本字幕仅供学习交流，严禁用于商业用途
//ctx.beginPath():
//ctx.moveTo(x，y)；
//ctx.lineTo(x，y-)；
//ctx.stroke():
//ctx.beginPath():
//
//ctx.moveTo(x，y-)；
//ctx.lineTo(x，y-)；
//ctx.lineTo(x，y-)；
//ctx.fill():
ctx.beginPath():
ctx.moveTo(x，y)；
ctx.lineTo(x，y)；
CTX。笔画()；
ctx.beginPath():
ctx.moveTo(x，y)；
ctx.lineTo(x，y)；
ctx.lineTo(x，y)；
ctx.fill():
}
//据坐标旋转
函数变换(ctx，x，y，角度、b)}
如果(b){//顺时针
ctx.transform(Math.cos(角度)、Math.sin(角度),
-Math.sin(角度)、Math.cos(角度),
x *(math . cos(angle))x * math . sin(角度),
y *(math . cos(角度))- y*Math.sin(角度)
}
}
/===本字幕仅供学习交流，严禁用于商业用途每秒执行===============本字幕仅供学习交流，严禁用于商业用途===本字幕仅供学习交流，严禁用于商业用途===本字幕仅供学习交流，严禁用于商业用途执行事件自选)
窗户。setinterval(function(){ draw()})，
//window.onload=function(){ //效果同上
//setInterval(draw()，
//}:
///]]
/脚本
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。