HTLM5绘制钟表技术大揭秘

首先我们分析需求，在没有任何图片的情况下，我们必须要绘制地盘，刻度，时针，分针以及秒针，并且每秒绘制一次秒针，时

HTML5中使用canvas绘制时钟

针，分针的刻度也同意是有规律可循的，例如时针是分针走360度后时针走30度，也就是12：1的比例，秒针走360度，分针走6度，也就是60：1的角度比例，以此我们可以计算任意时刻的时，分，秒的角度值。每秒总的角度比为，时针：分针：秒针 = 1：12：720。需求分析结束后，便可以开始着手绘制我们的表盘了。

首先创建一个canvas.html文件，内容如下：

<!DOCTYPE html>

<html>

<head>

<title>canvas时钟Demo</title>

</head>

<body>

<canvas id="canvas" width="600px" height="600px" style="background-color: #F0F8FF; position:absolute;left: 100px;">该浏览器不支持canvas</canvas>

</body>

</html>

HTML5中使用canvas绘制时钟

canvas.html

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

HTML5中使用canvas绘制时钟

创建canvas.js文件

并将所有的逻辑写到这个js文件中。

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

HTML5中使用canvas绘制时钟

绘制中所有使用到的常量

var canvas = null;

var context = null;

var RADIUS = 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'; //秒针颜色

创建一个初始化的方法function init(){}，用来初始化canvas和context的内容，如果着这里对于context这个中文翻译为上下文的东西还不懂的话可以自行查阅相关文档（最基础的了，不懂就别接下看了，看了也白瞎）。

HTML5中使用canvas绘制时钟

init()初始化方法

为何是canvas.getContext("2d")，因为API提供的就是如果绘制2D图片的上下文就是传递这个2d去取得这个对象。

接下来绘制表盘和刻度，我们分析一下，因为刻度都是有规律的，每五条就有一条是整点的刻度，所以我们用5来取余来绘制不同样式的刻度。

/** 绘制钟表圆盘 */

function 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();

}

绘制刻度内容如下

/** 绘制钟表的时间刻度

function 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 < 60; i ++){

if(i % 5 == 0){

fillColor = "red";

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 = "black";

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

function 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);

context.stroke();

context.closePath();

if(num !== null){

context.beginPath();

context.lineWidth = 1;

context.strokeStyle = fillColor;

context.strokeText(num + "", numP.x, numP.y);

context.stroke();

context.closePath();

}

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

function drawHands(){

setInterval(function(){

context.clearRect(0,0,500,500);

drawLine();

drawCircle();

drawHandByData(3);

drawHandByData(2);

drawHandByData(1);

},1000)

}

/**

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

* @param {Object} type 1为时针，2为分针，3为秒针

function drawHandByData(type){

var date = new Date();

var curHour = date.getHours();

var curMinutes = date.getMinutes();

var curSecond = date.getSeconds();

var angle = 0;

var handLen = 0;

var allSecond = 0;

var handWidth = 0;

var handColor = "";

if(type == 1){

var hour = curHour >= 12 ? curHour - 12 : curHour;

allSecond = hour * 3600 + curMinutes * 60 + curSecond;

angle = (Math.PI/6) * (allSecond / 3600);

handLen = HOURHANDLEN;

handWidth = HOURHANDWIDTH;

handColor = HOURHANDCOLOR;

}

else if(type == 2){

handLen = MINUTESHANDLEN;

allSecond = curMinutes * 60 + curSecond;

angle = (Math.PI / 30) * (allSecond / 60)

handWidth = MINUTESHANDWIDTH;

handColor = MINUTESHANDCOLOR;

}

else if(type == 3){

handLen = SECONDHANDLEN;

allSecond = curSecond;

angle = (Math.PI / 30) * allSecond;

allSecond = curSecond;

handWidth = SECONDHANDWIDTH;

handColor = SECONDHANDCOLOR;

}

drawHand(Math.PI - angle, handLen, handWidth, handColor);

}

/**

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

* @param {Object} angle 时针，分针，秒针的角度

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

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

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

function drawHand(angle, handLen, handWidth, handColor){

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

endP.x = POINTX + Math.sin(angle) * handLen;

endP.y = POINTY + Math.cos(angle) * handLen;

context.beginPath();

context.lineWidth = handWidth;

context.strokeStyle = handColor;

context.moveTo(POINTX, POINTY);

context.lineTo(endP.x, endP.y);

context.stroke();

context.closePath();

}

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

init();

drawLine();

drawCircle();

drawHands();

整个JS文件我是用的是闭包写法，如：

(function(win){

function init(){}

drawLine(){}

drawCircle(){}

drawHands(){}

//最后调用

init();

drawCircle();

drawLine();

drawHands();

})(window)

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h26774.shtml