H5的canvas绘画的一个简单时钟（h5时间轴动画）

HTML5简称H5，现在因为很火，很多人都在学。canvas是属于H5里面的一个标签,它有很强大的绘画功能。当然，这些功能不是说用HTML标签就能实现，它还要结合JavaScript一起完成。

这次是用canvas绘画简单的时钟，整体思路：先画框drawBackground，然后把时针(drawHour)，分针(drawMinute)，秒针(drawSecond)分别画出来. 画完之后就开始实现动画了。动画实现是先清除整个绘画，然后再重新画一遍钟，每秒执行一次。

//canvas的div结构 内容很少

<div>

<canvas id="clock" height="600px" width="600px"></canvas>

</div>

//先画框

function drawBackground(){

ctx.save();//保存当前环境状态

ctx.translate(r,r);//重新定义原点坐标，正方形的正中心

ctx.beginPath();//起始路径

ctx.lineWidth = 10 * em;//加粗10像素

ctx.arc(0,0,r-5*em,0,2*Math.PI,false);//创建圆

ctx.stroke();//设置绘画方式，画线

var hours = [3,4,5,6,7,8,9,10,11,12,1,2];//定义时间数组

ctx.font = 16 * em + "px Arial"//字体和字体大小

ctx.textAlign = 'center';//数字相对圆心左右两边居中

ctx.textBaseline = 'middle';//数字相对圆心上线两边居中

//画时刻

hours.forEach(function(number , i){

var rad = 2 * Math.PI / 12 * i; //把圆分12个弧度

var x = Math.cos(rad) * (r - 30 * em);

var y = Math.sin(rad) * (r - 30 * em);

ctx.fillText(number , x, y);

});

//画点

for(var i=0;i < 60 ; i++){

var rad = 2 * Math.PI / 60 *i;

var x = Math.cos(rad) * (r - 18 * em);

var y = Math.sin(rad) * (r - 18 * em);

ctx.beginPath();

//如果是整时就实黑点 不是就虚点

if(i % 5 === 0){

ctx.fillStyle = '#000';

ctx.arc(x, y, 2 * em, 0, 2 * Math.PI, false);

}else{

ctx.fillStyle = '#ccc';

ctx.arc(x, y, 2 * em, 0, 2 * Math.PI, false);

}

ctx.fill();//填充

}

}

//画时针

function drawHour(hour, minute){

ctx.save();

var rad = 2 * Math.PI / 12 * hour;

var mrad = 2 * Math.PI / 12 / 60 * minute;

ctx.beginPath();

ctx.rotate(rad + mrad);//旋转角度

ctx.lineWidth = 6 * em;//时针宽度

ctx.lineCap = 'round';//线条的每个末端添加圆形线帽

ctx.moveTo(0, 10 * em);

ctx.lineTo(0, -r / 2);

ctx.stroke();

ctx.restore();

}

//画分针

function drawMinute(minute){

ctx.save();

var rad = 2 * Math.PI / 60 * minute;

ctx.beginPath();

ctx.rotate(rad);//旋转角度

ctx.lineCap = 'round';//线条的每个末端添加圆形线帽

ctx.lineWidth = 4 * em;

ctx.moveTo(0, 10 * em);

ctx.lineTo(0, -r + 30 * em);

ctx.stroke();

ctx.restore();

}

//画秒针

function drawSecond(second){

ctx.save();

ctx.beginPath();

ctx.fillStyle = '#c14543';

var rad = 2 * Math.PI / 60 * second;

ctx.rotate(rad);

ctx.moveTo(-2 * em, 20 * em);

ctx.lineTo(2 * em, 20 * em);

ctx.lineTo(1, -r + 18 * em);

ctx.lineTo(-1, -r + 18 * em);

ctx.fill();

ctx.restore();

}

//画中心点

function drawDot(){

ctx.beginPath();

ctx.fillStyle = '#fff';

ctx.arc(0, 0, 3 * em, 2*Math.PI, false);

ctx.fill();

}

//获取时间绘制走向

function draw(){

ctx.clearRect(0, 0, width, height);//每秒清除重新画

var now = new Date();//获取当前时间

var hour = now.getHours();//获取小时数

var minute = now.getMinutes();//获取分钟数

var second = now.getSeconds();//获取秒钟数

drawBackground();

drawHour(hour,minute);

drawMinute(minute);

drawSecond(second);

drawDot();

ctx.restore();//返回之前保存的路径状态和属性

}

draw(); //先执行一次绘画

setInterval(draw, 1000);//实现动画

头条写代码很不爽，看代码更不爽。不过这也没办法，大家将就吧。