canvas画时钟小案例

最新推荐文章于 2024-07-31 14:35:30 发布

qq_53245972

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量90

点赞数

文章标签：前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/qq_53245972/article/details/129674606

版权

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

* {

margin: 0;

padding: 0;

}

#clock {

width: 400px;

height: 400px;

margin: 100px auto;

background-color: darkgrey;

border-radius: 20px;

}

</style>

<body>

</div>

</body>

var cans = can.getContext("2d");

// 定义基础变量

var w = h = 400;//时钟宽高

var x = y = 200;//时钟中心坐标

var r = 180;//时钟半径

var r_hour = 60;//时针长度

var r_minute = 120;//分针长度

var r_second = 140;//秒针长度

var r_text = 140;//定义表盘文字的半径

var r_square = 165;//刻度

var r_circle = 10;//表盘小圆点

var deg = 2 * Math.PI;//定义基本的圆周

// 平移中心点

cans.translate(w / 2, h / 2);

// 初始化执行一次

function clock() {

// 画圆盘

drawCircle(0, 0, r, '#fff')

// 获取当前时间

var date = new Date()

var h = date.getHours() * (deg / 12) - deg / 4;//[0,23]

var m = date.getMinutes() * (deg / 60) - deg / 4;//[0,59]

var s = date.getSeconds() * (deg / 60) - deg / 4;//[0,59]

// 画时钟的表针

drawLine(0, 0, r_hour * Math.cos(h), r_hour * Math.sin(h), '#000', 10);

drawLine(0, 0, r_minute * Math.cos(m), r_minute * Math.sin(m), '#000', 5);

drawLine(0, 0, r_second * Math.cos(s), r_second * Math.sin(s), '#f00', 2);

// 画刻度

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

var θ = ((Math.PI * 2) / 60) * i - Math.PI / 2;

var x1 = r * Math.cos(θ);

var y1 = r * Math.sin(θ);

判断是否为整点

if (i % 5 == 0) {

var x2 = r_square * Math.cos(θ);

var y2 = r_square * Math.sin(θ);

drawLine(x1, y1, x2, y2, '#f00', 3)

} else {

var x2 = (r_square + 3) * Math.cos(θ);

var y2 = (r_square + 3) * Math.sin(θ);

drawLine(x1, y1, x2, y2, '#aaa', 2)

}

// 画表钉

drawCircle(0, 0, r_circle, '#000')

// 画数字

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

// 计算圆周坐标

// x = x + r*cos(θ)

// y = y + r*sin(θ)

var θ = ((Math.PI * 2) / 12) * i - Math.PI / 2;

var x = r_text * Math.cos(θ);

var y = r_text * Math.sin(θ);

drawText(i, x, y);

}

clock()

setInterval(() => {

clock()

}, 1000);

// 画直线的方法

function drawLine(x1, y1, x2, y2, color, width) {

cans.beginPath();

cans.moveTo(x1, y1);

cans.lineTo(x2, y2);

cans.strokeStyle = color;

cans.lineWidth = width;

cans.lineCap = 'round';//让指针头变圆

cans.stroke();

cans.closePath();

}

// 画文字的方法

function drawText(text, x, y) {

cans.font = 'bold 26px 微软雅黑';

cans.textAlign = "center";

cans.textBaseline = "middle";

cans.fillStyle = '#000';

cans.fillText(text, x, y);

}

// 画圆的方法

function drawCircle(x, y, r, color) {

cans.beginPath();

cans.arc(x, y, r, 0, Math.PI * 2);

cans.fillStyle = color || '#000';

cans.fill();

}

</script>

</html>

qq_53245972

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas画时钟小案例

利用canvas画一个时钟的案例
复制链接

扫一扫