您的位置：首页 > 其它

canvas绘制时钟

2016-12-08 22:48 190 查看

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<canvas width="500" height="500" style="border: 1px solid red;"></canvas>

<script>

// 1.获取canvas对象

var canvas = document.querySelector('canvas');

// 2.获取绘图环境

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

// 3.提前将坐标原点移动到中心点

ctx.translate(canvas.width / 2, canvas.height / 2);

setInterval(function() {

// 4.0 清空画布

ctx.clearRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);

/*

3.钟表

表盘：圆

刻度：时针(12)和分针(60)刻度

三针：时分秒针

数字

表动起来

*/

// 4.1 表盘

ctx.beginPath();

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

ctx.closePath();

ctx.stroke();

// 4.2 分针刻度（60个刻度）全圆 2PI = 60刻度 1刻度 = 2PI/60

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

ctx.save();

ctx.beginPath();

ctx.rotate(2 * Math.PI / 60 * i);

ctx.moveTo(0, -240);

ctx.lineTo(0, -250);

ctx.stroke();

ctx.restore();

}

// 4.3 时针刻度（12个刻度） 2PI/12

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

ctx.save();

ctx.beginPath();

ctx.rotate(2 * Math.PI / 12 * i);

ctx.moveTo(0, -230);

ctx.lineTo(0, -250);

ctx.lineWidth = 3;

ctx.stroke();

ctx.restore();

}

// 4.4 三针

// 获取时分秒

var d = new Date();

var hour = d.getHours();

var minute = d.getMinutes();

var second = d.getSeconds();

/*

9:55:25

1个小时=>2PI/12 总小时数旋转的弧度：9+55/60+25/3600 * 2PI/12

1分钟=>2PI/60 总分钟数旋转的弧度：55+25/60 * 2PI/60

1秒钟=>2PI/60 总分钟数旋转的弧度：25 * 2PI/60

*/

// 时针

ctx.save();

ctx.beginPath();

ctx.rotate((hour + minute / 60 + second / 3600) * 2 * Math.PI / 12);

ctx.moveTo(0, 20);

ctx.lineTo(0, -100);

ctx.lineWidth = 6;

ctx.stroke();

ctx.restore();

// 分针

ctx.save();

ctx.beginPath();

ctx.rotate((minute + second / 60) * 2 * Math.PI / 60);

ctx.moveTo(0, 20);

ctx.lineTo(0, -150);

ctx.lineWidth = 4;

ctx.stroke();

ctx.restore();

// 秒针

ctx.save();

ctx.beginPath();

ctx.rotate(second * 2 * Math.PI / 60);

ctx.moveTo(0, 20);

ctx.lineTo(0, -200);

ctx.lineWidth = 2;

ctx.strokeStyle = 'red';

ctx.stroke();

ctx.restore();

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

ctx.save();

var x = 210 * Math.sin(Math.PI * 2 / 12 * i);

var y = 210 * Math.cos(Math.PI * 2 / 12 * i);

ctx.font = '30px 微软雅黑';

ctx.textBaseline = 'middle';

ctx.textAlign = 'center';

// 绘制数字

ctx.fillText(i, x, -y);

ctx.restore();

}

}, 1000)

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： canvas 时钟

相关文章推荐

新的分享

章节导航