canvas画布时钟

2022-02-24 18:32:04 阅读：227 来源： 互联网

标签：60 canvas beginPath ctx 画布 stroke PI Math 时钟

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>canvas画布</title>
</head>
<body>
	<canvas id="canvas" width="600" height="600"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');

		setInterval(() => {
		    ctx.save()
		    ctx.clearRect(0, 0, 600, 600)
		    ctx.translate(300, 300) // 设置中心点，此时300，300变成了坐标的0，0
		    ctx.save()

		    // 画大圆
		    ctx.beginPath()
		    // 画圆线使用arc(中心点X,中心点Y,半径,起始角度,结束角度)
		    ctx.arc(0, 0, 100, 0, 2 * Math.PI)
		    ctx.stroke() // 执行画线段的操作
		    ctx.closePath()

		    // 画小圆
		    ctx.beginPath()
		    ctx.arc(0, 0, 5, 0, 2 * Math.PI)
		    ctx.stroke()
		    ctx.closePath()

		    // 获取当前 时，分，秒
		    let time = new Date()
		    let hour = time.getHours() % 12
		    let min = time.getMinutes()
		    let sec = time.getSeconds()

		    // 时针
		    ctx.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 12 * (min / 60) - Math.PI / 2)
		    ctx.beginPath()
		    // moveTo设置画线起点
		    ctx.moveTo(-10, 0)
		    // lineTo设置画线经过点
		    ctx.lineTo(40, 0)
		    // 设置线宽
		    ctx.lineWidth = 10
		    ctx.stroke()
		    ctx.closePath()
		    ctx.restore()
		    ctx.save()

		    // 分针
		    ctx.rotate(2 * Math.PI / 60 * min + 2 * Math.PI / 60 * (sec / 60) - Math.PI / 2)
		    ctx.beginPath()
		    ctx.moveTo(-10, 0)
		    ctx.lineTo(60, 0)
		    ctx.lineWidth = 5
		    ctx.strokeStyle = 'blue'
		    ctx.stroke()
		    ctx.closePath()
		    ctx.restore()
		    ctx.save()

		    //秒针
		    ctx.rotate(2 * Math.PI / 60 * sec - Math.PI / 2)
		    ctx.beginPath()
		    ctx.moveTo(-10, 0)
		    ctx.lineTo(80, 0)
		    ctx.strokeStyle = 'red'
		    ctx.stroke()
		    ctx.closePath()
		    ctx.restore()
		    ctx.save()

		    // 绘制刻度，也是跟绘制时分秒针一样，只不过刻度是死的
		    ctx.lineWidth = 1
		    for (let i = 0; i < 60; i++) {
		        ctx.rotate(2 * Math.PI / 60)
		        ctx.beginPath()
		        ctx.moveTo(90, 0)
		        ctx.lineTo(100, 0)
		        // ctx.strokeStyle = 'red'
		        ctx.stroke()
		        ctx.closePath()
		    }
		    ctx.restore()
		    ctx.save()
		    ctx.lineWidth = 5
		    for (let i = 0; i < 12; i++) {
		        ctx.rotate(2 * Math.PI / 12)
		        ctx.beginPath()
		        ctx.moveTo(85, 0)
		        ctx.lineTo(100, 0)
		        // ctx.strokeStyle = 'red'
		        ctx.stroke()
		        ctx.closePath()
		    }

		    ctx.restore()
		    ctx.restore()
		}, 1000)

	</script>
	<style type="text/css">
		/*.bg{background: red;}*/
	</style>
</body>
</html>

标签：60,canvas,beginPath,ctx,画布,stroke,PI,Math,时钟
来源： https://www.cnblogs.com/huayang1995/p/15933055.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

canvas画布时钟