canvas实现钟表

我是一个小稻米

已于 2022-05-17 14:17:09 修改

阅读量223

点赞数

分类专栏：前端文章标签： css3 javascript css

于 2022-05-17 13:21:01 首次发布

本文链接：https://blog.csdn.net/weixin_44669966/article/details/124819573

版权

前端专栏收录该内容

49 篇文章 2 订阅

订阅专栏

请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
	/* 画布位置 */
	.box {
		width: 500px;
		height: 500px;
		background-color: #202121;
		border-radius: 100px; 
		margin: 0 auto;
	}
</style>
<body>
	<div class="box">
		<canvas width="500" height="500" class="canvas" id="canvas"></canvas>
	</div>
</body>
<script>
	let canvas = document.getElementById("canvas")
	// 绘制2d平面,没有3d
	let ctx = canvas.getContext('2d')
	let img = new Image()
	img.src = '1.jpg'
	let width = height = 440,
			x = y = 250,
			_r = 220,
			_h = 80,
			_m = 140,
			_s = 170,
			_tr = 180,
			_zr = 210,
			_rc = 10,
			_deg = Math.PI*2;
	ctx.translate(x, y)
	function clock(ctx) {
		// 坐标平移
		// 表盘
		yuan(ctx, 0, 0, _r, 0, _deg, true, "#fff", "#fff")
		// logo
		ctx.drawImage(img,  -30, -140, 80, 80)
		// 获取真实时间
		var date = new Date(),
			h = date.getHours() * (_deg/12) - (_deg/4),
			m = date.getMinutes() * (_deg/60) - (_deg/4),
			s = date.getSeconds() * (_deg/60) - (_deg/4)
		// 偏移量
		h += m/12
		m +=s/60
		// 指针
		can(ctx, 0, 0, _h *Math.cos(h), _h *Math.sin(h), "#000", 5)
		can(ctx, 0, 0, _m *Math.cos(m), _m *Math.sin(m), "#000", 4)
		can(ctx, 0, 0, _s *Math.cos(s), _s *Math.sin(s), "red", 2)
		// 指针尾部
		can(ctx, 0, 0, -_h *Math.cos(h)/5, -_h *Math.sin(h)/5, "#000", 5)
		can(ctx, 0, 0, -_m *Math.cos(m)/5, -_m *Math.sin(m)/5, "#000", 4)
		can(ctx, 0, 0, -_s *Math.cos(s)/5, -_s *Math.sin(s)/5, "red", 2)
		// 表钉
		yuan(ctx, 0, 0, _rc, 0, _deg, true, "#000", "#000")
		yuan(ctx, 0, 0, _rc-7, 0, _deg, true, "#c0c4c3", "#c0c4c3")
		// 数字
		for(let i = 1; i<=12;i++) {
			// 数字位置计算
			// x = r * cos(c)
			// y = r * sin(c)
			var c = (_deg/12) * i - _deg/4
			var xi = _tr * Math.cos(c)
			var yi = _tr * Math.sin(c)
			console.log(xi, yi)
			text(ctx, i, xi, yi, 30, "center", "middle")
		}
		// 刻度
		for(let i= 0; i< 60; i++) {
			var c = (_deg/60) * i - _deg/4
			var x1 = _r * Math.cos(c)
			var y1 = _r * Math.sin(c)

			var x2 = _zr * Math.cos(c)
			var y2 = _zr * Math.sin(c)
			var linewidth = 1
			if(i%5 === 0) {
				linewidth = 3
				x2 = 59*(x2/60)
				y2 = 59*(y2/60)
			}
			can(ctx, x1, y1, x2, y2, "#000", linewidth)
		}
		
	}
	// 初始化执行一次
	clock(ctx)
	setInterval(function(){
		clock(ctx)
	}, 1000)
	// (x, y)表示原点坐标, r, start表示起始角度, end表示结束角度, xiang表示逆时针


	function text(ctx, txt, x, y, fontsize,textAlign, textBaseline) {
		ctx.font = `${fontsize}px 宋体`
		ctx.textAlign = textAlign
		ctx.textBaseline = textBaseline
		ctx.fillStyle = "#000"
		ctx.fillText(txt, x, y )
	}
	
	function yuan(ctx, x, y, r, start, end, xiang, linecolor, fillcolor, linewidth) {
		ctx.beginPath()
		ctx.arc(x, y, r, start, end, xiang)
		ctx.lineWidth = linewidth
		// 填充颜色
		ctx.fillStyle = fillcolor
		ctx.fill()
		ctx.strokeStyle = linecolor;
		// 着色
		ctx.stroke()
	}
	
	// 画线
	function can(ctx, startx, starty, endx, endy, color, width) {
		// 开始画一条路径
		ctx.beginPath()
		// 确定起始点
		ctx.moveTo(startx, starty)
		// 确定结束点
		ctx.lineTo(endx, endy)
		// 着色之前设置颜色和线宽
		ctx.strokeStyle = color;
		ctx.lineWidth = width
		ctx.lineCap = "round"
		// 着色
		ctx.stroke()
		// 关闭路径
		ctx.closePath()
	}
	
</script>
</html>

我是一个小稻米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas实现钟表

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫