怎么用canvas画秒针_如何用canvas画时间同步的时钟

Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图,可以说是H5最强大的标签.今天我们用CANVAS画一个简单的钟表.

封面图

效果如下

效果图

HTML代码

没什么可说的

js代码

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext('2d');

function drawclock() {

var deg = Math.PI / 180;

ctx.clearRect(0, 0, canvas.width, canvas.height);//清空画布

//表盘

ctx.beginPath();

ctx.arc(250, 250, 200, 0, Math.PI * 2, true)

ctx.lineWidth = 10;

ctx.strokeStyle = "darksalmon";

ctx.stroke();

ctx.beginPath();

ctx.strokeStyle = "black";

ctx.lineWidth = 5;

//数字

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

txt=i<1?12:[i]; //三目运算符

ctx.font = "15px KaiTi";

ctx.lineWidth = 2;

ctx.strokeText(txt, 244 + Math.sin(deg * 30 * i) * 170, 256 - Math.cos(deg * 30 * i) * 170);

}

//时间点

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

ctx.beginPath();

ctx.lineWidth =j%5==0?5:2;

ctx.moveTo(250 + Math.sin(deg * 6 * j) * 185, 250 - Math.cos(deg * 6 * j) * 185);

ctx.lineTo(250 + Math.sin(deg * 6 * j) * 195, 250 - Math.cos(deg * 6 * j) * 195);

ctx.stroke();

}

//获取时间

var now = new Date(); //定义时间

var sec = now.getSeconds(); //获取秒

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

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

//小时必须获取浮点类型，产生偏移(小时+分钟比)

hour = hour + minute / 60;

hour = hour > 12 ? hour - 12 : hour;//将24小时转换为12小时

//画分针

ctx.save();//保存了ctx当前的状态值

ctx.beginPath();

ctx.strokeStyle = "yellow";

ctx.lineWidth = 5;

ctx.moveTo(250, 250);

ctx.lineTo(250 + Math.sin(deg * 6 * minute) * 150, 250 - Math.cos(deg * 6 * minute) * 150);

ctx.stroke();

//画秒针

ctx.beginPath();

ctx.strokeStyle = "red";

ctx.lineWidth = 3;

ctx.moveTo(250, 250);

ctx.lineTo(250 + Math.sin(deg * 6 * sec) * 170, 250 - Math.cos(deg * 6 * sec) * 170);

ctx.stroke();

ctx.restore();

//画时针

ctx.beginPath();

ctx.strokeStyle = "mediumspringgreen";

ctx.lineWidth = 10;

ctx.moveTo(250, 250);

ctx.lineTo(250 + Math.sin(deg * 30 * hour) * 130, 250 - Math.cos(deg * 30 * hour) * 130);

ctx.stroke();

ctx.restore();//将ctx之前的状态值还原回去

}

drawclock();

setInterval(drawclock, 1000);

注意几点:

1.文字加粗会产生偏移,文字位置做了些修改

2.浮点表示小时可使效果更逼真

可在此基础上完善实现更好的效果