简单钟表绘制

给大家分享一个canvas的时钟绘制
复制可直接使用简单钟表绘制

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h1 {
				text-align: center;
			}
			
			div {
				width: 400px;
				height: 400px;
				margin: 10px auto;
				padding: 0;
			}
		</style>
	</head>

	<body>
		<h1>手绘时钟</h1>
		<hr />
		<div>
			<canvas id="c1" width="400px" height="400px">
				
			</canvas>
		</div>
		<script type="text/javascript">
			var clock = document.getElementById("c1").getContext("2d");
			
//			var clock = $("#huabu").get(0).getContext("2d"); //$中使用画布
			
			function play() {
				clock.clearRect(0, 0, 400, 400);
				clock.save();
				clock.translate(200, 200); //把画布中心转移到canvas中间
				biaopan();
				run();
				clock.restore();
			}
			setInterval(function() {
				play();
			}, 1000);

			function biaopan() {
				//绘制表盘
				clock.strokeStyle = " #9932CC";
				clock.lineWidth = 5;
				clock.beginPath();
				clock.arc(0, 0, 195, 0, 2 * Math.PI);
				clock.stroke();
				
				//刻度(小时)
				clock.strokeStyle = "#9932CC";
				clock.lineWidth = 5;
				for(var i = 0; i < 12; i++) {
					clock.beginPath();
					clock.moveTo(0, -190);
					clock.lineTo(0, -170);
					clock.stroke();
					clock.rotate(2 * Math.PI / 12);
				}
				//刻度(分钟)
				clock.strokeStyle = "#9932CC";
				clock.lineWidth = 3;
				for(var i = 0; i < 60; i++) {
					clock.beginPath();
					clock.moveTo(0, -190);
					clock.lineTo(0, -180);
					clock.stroke();
					clock.rotate(2 * Math.PI / 60);
				}
				//绘制文字
				clock.textAlign = "center";
				clock.textBaseline = "middle";
				clock.fillStyle = "#6495ED";
				clock.font = "20px 微软雅黑"
				for(var i = 1; i < 13; i++) {
					clock.fillText(i,Math.sin(2*Math.PI /12*i)*150,Math.cos(2*Math.PI/12*i)*-150);
				}
				
			}

			function run() {
				var date = new Date();
				var h = date.getHours();
				var m = date.getMinutes();
				var s = date.getSeconds();
//				if(h > 12) {
//					h = h - 12;
//				}
				//日期
				var week = date.getDay();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				switch (week){
					case 1: week = "星期一";
						break;
					case 2: week = "星期二";
						break;
					case 3: week = "星期三";
						break;
					case 4: week = "星期四";
						break;
					case 5: week = "星期五";
						break;
					case 6: week = "星期六";
						break;
					default: week = "星期天";
						break;
				}
				clock.save();
				clock.textAlign = "center";
				clock.textBaseline = "middle";
				clock.fillStyle = "black";
				clock.font = "16px"
				clock.fillText(week,-2,-118);
				clock.fillText(month+" 月",-90,2);
				clock.fillText(day+" 号",90,0);
				clock.stroke();
				clock.restore();

				//时针
				//分针60格 分针5格 
				clock.save();
				clock.rotate(2 * Math.PI / 12 * h + (2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60) / 12);
				clock.strokeStyle = "black";
				clock.lineWidth = 7;
				clock.beginPath();
				clock.moveTo(0, 0);
				clock.lineTo(0, -80);
				clock.lineCap = "round";
				clock.stroke();
				clock.restore();
				//分针
				//秒针60格 分针一格
				clock.save();
				clock.beginPath();
				clock.strokeStyle = "#D2691E";
				clock.lineWidth = 5;
				clock.rotate(2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60);
				clock.moveTo(0, 0);
				clock.lineTo(0, -110);
				clock.lineCap = "round";
				clock.stroke();
				clock.restore();
				//秒针
				clock.strokeStyle = "red";
				clock.rotate(2 * Math.PI / 60 * s);
				clock.lineWidth = 4;
				clock.beginPath();
				clock.moveTo(0, 0);
				clock.lineTo(0, -120);
				clock.lineCap = "round";
				clock.stroke();
				//中心
				clock.fillStyle = " #CCFFFF";
				clock.lineWidth = 5;
				clock.beginPath();
				clock.arc(0, 0, 10, 0, 2 * Math.PI);
				clock.fill();
				clock.strokeStyle = "cadetblue";
				clock.stroke();
				
			}
		</script>
	</body>

</html>

上一篇:mysql数据库按周统计


下一篇:20201105-2 beta week 1/2 Scrum立会报告+燃尽图 06