使用canvas绘制钟表

最新推荐文章于 2024-06-14 11:20:52 发布

weixin_34206899

最新推荐文章于 2024-06-14 11:20:52 发布

阅读量71

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3759656/blog/2247232

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		canvas{
			border:1px solid red;
		}
	</style>
	<script>
		window.onload = function(){
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');
			// 移动坐标轴，到圆心位置，将坐标轴移到画布的正中间
			context.translate(200,200);
			context.beginPath();
			context.arc(0,0,200,0,Math.PI*2);
			// 刻度
			context.moveTo(180,0);
			context.lineTo(200,0);
			// 保存一下坐标轴，样式设置
			context.save(); 
			for(var i=0;i<11;i++){
				context.rotate(Math.PI/6);
				context.moveTo(180,0);
				context.lineTo(200,0);
			}
			context.closePath();
			// 复位
			context.restore();
			context.moveTo(5,0);
			context.arc(0,0,5,0,Math.PI*2);
			context.moveTo(5,0);
			context.lineTo(100,0);
			context.moveTo(0,-5);
			context.lineTo(0,-130);
			context.moveTo(0,5);
			context.lineTo(0,150);
			context.stroke();
		}
	</script>
</head>
<body>
	<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>

转载于:https://my.oschina.net/u/3759656/blog/2247232