首先我们分析需求。在没有任何图片的情况下，我们必须画出地域、比例尺、时针、分针和秒针，并且每秒画出秒针和小时

用HTML5中的画布绘制时钟

指针和分钟的刻度也同意有规则可循。比如时针走360度之后时针走30度，也就是12: 1的比例，秒针走360度，分针走6度，也就是60: 1的角度比例，这样我们就可以计算出任意时刻的小时、分钟、秒的角度值。每秒总角度比是时针：分针：秒针=1: 12: 720。在需求分析之后，我们就可以开始画我们的表盘了。

首先，创建一个包含以下内容的canvas.html文件：

！声明文档类型

超文本标记语言

头

meta charset='UTF-8 '

标题画布时钟演示/标题

/head

身体

canvas id=' canvas ' width=' 600 px ' height=' 600 px ' style=' background-color : # F0F 8FF；position:absolute值；' left: 100px'此浏览器不支持画布/画布

脚本类型=' text/JavaScript ' src=' js/canvas . js '/script

/body

/html

用HTML5中的画布绘制时钟

canvas.html

接下来，在js文件夹中创建一个canvas.js文件

用HTML5中的画布绘制时钟

创建canvas.js文件

并将所有逻辑写入这个js文件。

首先定义所有常量，如图：

用HTML5中的画布绘制时钟

绘图中使用的所有常数

var canvas=null

var context=null

可变半径=200；//半径

var POINTX=300//原点x

var POINTY=300//原点y

var HOURHANDLEN=100//时针长度

var MINUTESHANDLEN=140//分针长度

var SECONDHANDLEN=180//二手长度

var HOURHANDWIDTH=5；//时针宽度

var MINUTESHANDWIDTH=3；//分针宽度

var SECONDHANDWIDTH=1；//二手宽度

var HOURHANDCOLOR=' # FF00FF//时针颜色

var MINUTESHANDCOLOR=' # CC10FF//分针颜色

var SECONDHANDCOLOR=' # 1155BB//二手颜色

创建一个初始化方法，函数init(){}，初始化画布和上下文的内容。如果不懂语境，也就是中文翻译成的语境，可以自己查阅相关文献(最基础的一个，不懂就不要看，太瞎了看不下去)。

用HTML5中的画布绘制时钟

init()的初始化方法

为什么是canvas.getContext('2D ')，因为API提供的是如果绘制2D图片的上下文是通过这个2d来获取这个对象。

接下来，画出表盘和刻度。我们分析它。因为音阶是有规律的，每五个音阶中就有一个是整点，所以我们用5来画不同的音阶。

/* *画一个时钟盘*/

函数drawCircle(){

context . BeginPath()；

context.strokeStyle='black '

context . LineWidth=4；

context.arc(POINTX，POINTY，RADIUS，0，Math。PI * 2)；

context . ClosePath()；

context . stroke()；

context . BeginPath()；

context.fillStyle=' black

context.arc(POINTX，POINTY，4，0，Math。PI * 2)；

context . ClosePath()；

context . fill()；

}

按如下方式绘制比例

/* *画出时钟的时标

*/

函数drawLine(){

var startP={x : 0，y : 0 }；

var endP={x : 0，y : 0 }；

var numP={x : 0，y : 0 }；

var fillColor=' red

var len=10

var num=null

for(var I=0；i 60i ){

if(i % 5==0){

fillColor='红色'；

len=10

num=12-Math . floor(I/5)；

NuMP . x=POINTX-4-(RADIUS-20)* Math . sin(I * Math。PI/30)；//4是微调数字位置

NuMP . y=POINTX 4-(RADIUS-20)* Math . cos(I * Math。PI/30)；//4是微调数字位置

}

else{

fillColor='黑色'；

len=5；

num=null

}

startp . x=POINTX-RADIUS * Math . sin(I * Math。PI/30)；

startp . y=POINTX-RADIUS * Math . cos(I * Math。PI/30)；

endp . x=POINTX-(RADIUS-len)* Math . sin(I * Math。PI/30)；

endp . y=POINTX-(RADIUS-len)* Math . cos(I * Math。PI/30)；

drawLineCore(startP，endP，fillColor，num，NuMP)；

}

}

/**

*根据提供的起点绘制刻度盘

* @param {Object} startP

* @param {Object} endP

* @param {Object} fillColor

*/

函数drawLineCore(startP，endP，fillColor，num，numP){

context . BeginPath()；

context . LineWidth=2；

context.strokeStyle=fillColor

context.moveTo(startP.x，startp . y)；

context.lineTo(endP.x，ENdp . y)；

背景。stroke()；

背景。ClosePath()；

if(num！==null){

背景。begin path()；

背景。线宽=1；

context.strokeStyle=fillColor

context.strokeText(num ' '，numP.x，numP。y)；

背景。stroke()；

背景。ClosePath()；

}

}

绘制完表盘和刻度后，我们开始绘制时分秒针了，根据我们刚刚分析的角度比例关系，我们写如下代码：

函数drawHands(){

setInterval(function(){

context.clearRect(0，0，500，500)；

画线()；

draw circle()；

drawHandydata(3)；

drawHandydata(2)；

drawHandydata(1)；

},1000)

}

/**

* 根据类型和指针的数字来绘制图形，统一换算成秒数来计算角度

* @param {Object}类型一为时针，2为分针，3为秒针

*/

函数drawHandByData(类型){

var Date=new Date()；

var cur hour=date。gethours()；

var curMinutes=date。GetMinutes()；

var curs second=date。GetSeconds()；

var angle=0；

var Handlen=0；

var all秒=0；

var HandWidth=0；

var handColor=

if(type==1){

var hour=curHour=12？cur hour-12 : cur hour；

所有秒=小时* 3600 cur分钟* 60 curs秒；

角度=(数学。PI/6)*(全秒/3600);

handLen=HOURHANDLEN

handWidth=HOURHANDWIDTH

handar color=HOUR handar color

}

else if(type==2){

handLen=MINUTESHANDLEN

所有秒=cur分钟* 60 curs秒；

角度=(数学. PI/30) *(所有秒/60)

handWidth=分钟宽度

手颜色=分钟山色

}

else if(type==3){

handLen=SECONDHANDLEN

所有秒=光标秒

角度=(数学. PI/30)*全秒；

所有秒=光标秒

handWidth=SECONDHANDWIDTH

手动颜色=第二手动颜色

}

drawHand(数学。圆周角、手柄、手轮、手轮);

}

/**

* 绘制时针，分针，秒针统一方法

* @参数{对象}角度时针，分针，秒针的角度

* @param {Object}句柄时针，分针，秒针的长度

* @param {Object} handWidth时针，分针，秒针的宽度

* @param {Object}手颜色时针，分针，秒针的宽度

*/

功能手柄（角度、手柄、手柄、手柄颜色){

var endP={x:0，y:0}

endP.x=POINTX Math.sin(角度)* handLen

endp。y=POINTY Math。cos(角度)* handLen

背景。begin path()；

context.lineWidth=handWidth

context.strokeStyle=handColor

context.moveTo(POINTX，POINTY)；

context.lineTo(endP.x，endP。y)；

背景。stroke()；

背景。ClosePath()；

}

最后别忘了调用各个函数：

init()；

画线()；

draw circle()；

draw hands()；

整个射流研究…文件我是用的是闭包写法，如：

（函数(赢){

函数init(){}

drawLine(){}

drawCircle(){}

drawHands(){}

//最后调用

init()；

draw circle()；

画线()；

draw hands()；

})(窗口)