h5实现指针时钟

最近在慕课网上看见了用h5实现指针时钟，故好奇，遂观之，又与之分享。（本文实在太简单，还望大牛们多多指点）

主要使用了canvas绘图，这是完成后效果图：

1.首先在body体中添加一个canvas，再给它设置一个线条边框：

<div>
<canvas id="clock" width="200px" height="200px"></canvas>
</div>

#clock{
border: 1px solid #ccc;
}

2.剩下的都是js部分了，添加并引入外部js后的代码：

var canvas_dom = document.getElementById("clock");
var canvas_context = canvas_dom.getContext("2d");  //返回一个用于在画布上绘图的环境
var canvas_width = canvas_context.canvas.width;//捕获canvas宽
var canvas_heigth = canvas_context.canvas.height;//捕获canvas高
var clock_radius = canvas_width / 2;//添加半径
var multiple = canvas_width / 200;//这是倍数，可以通过改变canvas大小来改变时钟大小又不失美观

//绘制除钟表指针以外的背景图
function drag_background(){
//绘制外圆
canvas_context.save();  //保存绘制前 画布环境，因为有些属性会保存，影响后面的画布效果
canvas_context.translate(clock_radius,clock_radius);  //重新映射画布(0,0)的位置
canvas_context.beginPath();//起始一条路径,或者重置当前路径
canvas_context.lineWidth = 8 * multiple;  //设置当前线条的宽度
canvas_context.arc(0,0,clock_radius - canvas_context.lineWidth / 2  ,0,2*Math.PI,false);//绘制外层圆函数
canvas_context.stroke();  //绘制已定义的路径

//绘制12个数字
var hour_number = [3,4,5,6,7,8,9,10,11,12,1,2];    //因为绘制圆是从x轴正方向开始，所以数组顺序是这样的
canvas_context.font = 20 * multiple + "px Arial";//设置文本属性
canvas_context.textAlign = "center";//12个数字有偏移效果，此属性左右居中
canvas_context.textBaseline = "middle";//上下居中
hour_number.forEach(function(number,i){//通过forEach遍历数组
var hour_number_radian = 2 * Math.PI / 12 * i;  //每一小时的弧度 = 2πr / 12
var hour_number_x = Math.cos(hour_number_radian) * (clock_radius - 30 * multiple);  //数字x轴坐标，
var hour_number_y = Math.sin(hour_number_radian) * (clock_radius - 30 * multiple);//数字y轴坐标
canvas_context.fillText(number,hour_number_x,hour_number_y);//在画布上绘制文本
});

//绘制分针刻度
for(var i = 0; i < 60; i++){
var minute_radian = 2 * Math.PI / 60 * i;  //每一分钟的弧度 = 2πr / 60
var minute_x = Math.cos(minute_radian) * (clock_radius - 18 * multiple);//分针刻度x轴坐标
var minute_y = Math.sin(minute_radian) * (clock_radius - 18 * multiple);//分针刻度y轴坐标
canvas_context.beginPath();//重置当前路径
if(i % 5 == 0){//判断，如果是整小时刻度，则为黑色
canvas_context.fillStyle = "#000";  //设置颜色
canvas_context.arc(minute_x, minute_y, 2 * multiple, 0, 2 * Math.PI, false); //绘制分针刻度小圆点
}else{ //判断，如果不是整小时刻度，则为灰色
canvas_context.fillStyle = "#ccc";//设置颜色
canvas_context.arc(minute_x, minute_y, 2 * multiple, 0, 2 * Math.PI, false);
}
canvas_context.fill();//填充分针刻度小圆点
}
}

//创建时针
function drag_hour(hour,minute,seconds){
canvas_context.save();  //保存当前画布环境
canvas_context.beginPath();//重置当前路径
var hour_radian = 2 * Math.PI / 12 * hour + 2 * Math.PI / 12 / 60 * minute + 2 * Math.PI / 12 / 60 / 60 * seconds; //时针旋转角度=小时数+分针数+秒针数
canvas_context.rotate(hour_radian);//时针旋转
canvas_context.lineWidth = 6 * multiple;  //时针线条宽度
canvas_context.lineCap = "round";//设置线条端点样式
canvas_context.moveTo(0, 10 * multiple);//把路径移动到画布中的指定点，不创建线条
canvas_context.lineTo(0, - clock_radius / 2 );//从上一个指定点移动到当前点
canvas_context.stroke();//绘制已定义的路径
canvas_context.restore();  //还原保存的画布环境
}


//同上，创建分针
function drag_minute(minute,seconds){
canvas_context.save();
canvas_context.beginPath();
var minute_radian = 2 * Math.PI / 60 * minute + 2 * Math.PI / 60 / 60 * seconds;
canvas_context.rotate(minute_radian);
canvas_context.lineWidth = 3 * multiple;
canvas_context.lineCap = "round";
canvas_context.moveTo(0, 12 * multiple);
canvas_context.lineTo(0, - clock_radius + 30 * multiple);
canvas_context.stroke();
canvas_context.restore();
}

//创建分针，分针是一个尾部宽，头部窄的梯形
function drag_seconds(seconds){
canvas_context.save();
canvas_context.beginPath();
var seconds_radian = 2 * Math.PI / 60 * seconds;
canvas_context.rotate(seconds_radian);
canvas_context.fillStyle = "red";  //时针颜色
canvas_context.moveTo(-2 * multiple, 20 * multiple); //绘制梯形秒针开始点
canvas_context.lineTo(2 * multiple, 20 * multiple);
canvas_context.lineTo(1, -clock_radius + 20 * multiple);
canvas_context.lineTo(-1, -clock_radius + 20 * multiple);//结束点
canvas_context.fill();  //填充秒针
canvas_context.restore();
}


//绘制钟表圆心的螺丝效果
function drag_origin(){
canvas_context.beginPath();
canvas_context.fillStyle = "fff"
canvas_context.arc(0, 0, 3 * multiple, 2 * Math.PI, false);
canvas_context.fill();
}


//每秒调用一次，也就是说，钟表的所有图形都是每秒绘制一次，以此体现动态效果
function update_drag(){
canvas_context.clearRect(0, 0, canvas_width,canvas_heigth);  //清除上一个画布
var now = new Date();//获取系统时间
var now_hour = now.getHours();  //小时数
var now_minute = now.getMinutes();//分针数
var now_seconds = now.getSeconds();//秒针数
drag_background();//绘制背景函数
drag_hour(now_hour,now_minute,now_seconds);//绘制时针函数
drag_minute(now_minute,now_seconds);//绘制分针函数
drag_seconds(now_seconds);//绘制秒针函数
drag_origin();//绘制螺丝函数
canvas_context.restore();  //还原画布最初状态
}

update_drag();//第一次的执行

setInterval(update_drag, 1000);//每秒执行一次

canvas宽高都为100px时：

canvas宽高都为400px时：

写的太过草率，解释文字都以备注形式出现。这也是对自己学习知识的一个巩固。