首先我们剖析需求，在没有任何图片的情形下，我们必须要绘制地盘，刻度，时针，分针以及秒针，并且每秒绘制一次秒针，时
针，分针的刻度也赞许是有规律可循的，例如时针是分针走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>
<script type=\"大众text/javascript\"大众 src=\公众js/canvas.js\"大众 ></script>
</body>
</html>
canvas.html
接下来在js文件夹中创建一个canvas.js文件
创建canvas.js文件
并将所有的逻辑写到这个js文件中。
首先定义所有的常量，如图所示：
绘制中所有利用到的常量
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这个中文翻译为高下文的东西还不懂的话可以自行查阅干系文档（最根本的了，不懂就别接下看了，看了也白瞎）。
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.PI2);
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)
希望大家喜好我的分享，如果可以请点赞，多多留言。感激
