网页变幻云+canvas时钟

最新推荐文章于 2021-06-03 08:06:56 发布

D_Nicolas

最新推荐文章于 2021-06-03 08:06:56 发布

阅读量258

点赞数

本文链接：https://blog.csdn.net/D_Nicolas/article/details/77150907

版权

//本HTML代码主要是制作一个变换云背景，利用了三张透明背景图进行穿插，

//加上蓝黑背景色营造出一种变换的效果。中间div穿插了一个时钟，是利用

//canvas画出来的，可以获取当前时间，加上背景的变幻莫测，整体别具一格。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#mycanvas{
				position: absolute;	
				/*z-index: 1;*/
				left: 50%;
				margin-left: -250px;
			}
			
				.bg-color {
				width: 100%;
				height: 500px;
				position: relative;
				background-color: #007FD5;
				animation:change-color 50s ease infinite;
			}
			
			@keyframes change-color{
				0% {
					background-color:#007fd5;
				}
				50% {
					background-color:#000000;
				}
				100% {
					background-color:#007fd5;
				}
			}
			.cloud-one{
				width: 300%;
				height:500px ;
				background-image: url(img/cloud_one.png);
				position: absolute;
				top: 0;
				left: 0;
				animation: cloudmoving1 70s linear infinite;
			}
			@keyframes cloudmoving1{
				from{
					left: 0px;
				}
				to{left: -200%;}
			}
			.cloud-two{
				width: 300%;
				height:500px ;
				background-image: url(img/cloud_two.png);
				position: absolute;
				top: 0;
				left: 0;
				animation: cloudmoving2 100s linear infinite;
				
			}
			@keyframes cloudmoving2{
				from{
					left: 0px;
				}
				to{left: -200%;}
			.cloud-three{
				width: 300%;
				height:500px ;
				background-image: url(img/cloud_three.png);
				position: absolute;
				top: 0;
				left: 0;
				animation: cloudmoving3 120s linear infinite;
				
			}
			
			@keyframes cloudmoving3{
				from{
					left: 0px;
				}
				to{left: -200%;}
			
			
		</style>
	</head>
	<body>
		<!--
        	作者：offline
        	时间：2017-08-12
        	描述：canvas:html5新增的画布对象，可以在其中绘制任何的图像，以及线条效果，包括图片
        	canvas的尺寸应该通过属性进行设置，而不是使用样式进行设置！
        -->
		<div class="bg-color">
			
			<canvas id="mycanvas" width="500px" height="500px">您的浏览器太low了，实现不了！</canvas>
		
		<script type="text/javascript">
			//获取画布对象
			var mycanvas = document.getElementById('mycanvas');
			//获取一个2d绘图环境（拿到一支画笔）
			var ctx = mycanvas.getContext('2d');
			
			function draw(){
				//获取系统时间
				var nowTime = new Date();
				var hours = nowTime.getHours();
				var minutes = nowTime.getMinutes();
				var seconds = nowTime.getSeconds();
//				console.info(hours+":"+minutes+":"+seconds);
            //防止小时数超过12
            hours = hours>12?hours-12:hours;
            //精准的设置小时位置
            hours = hours+minutes/60;

            //清除画布(防止覆盖效果)
            ctx.clearRect(0,0,500,500);
			
			//初始化画笔的样式
			ctx.lineWidth = 2; //设置线条的宽度
			ctx.strokeStyle = '#fff';  //设置线条的颜色
			
			ctx.beginPath(); //开始画图路径
			//设置一个圆形路径
			ctx.arc(250,250,150,0,360,false);
			//绘制图形
			ctx.stroke();
				ctx.closePath();  //结束画图路径
			//绘制刻度（时刻度）
			for(var i=0;i<12;i++){
				ctx.beginPath();
				ctx.lineWidth=8;
				//保存当前绘图环境
				ctx.save();
				
				//重置绘制的起始位置（将圆心位置重置为0.0）
				ctx.translate(250,250);//转换画布的用户坐标系统
				//旋转画布到一定的弧度             弧度=角度*PI/180
				ctx.rotate(i*30*Math.PI/180);
				//设置绘制线条的起始位置
				ctx.moveTo(0,140);
				//设置线条的结束位置
				ctx.lineTo(0,150);
				//绘制路劲
				ctx.stroke();
				
				
				
				//还原初始的绘图环境
				ctx.restore();
				ctx.closePath();
			}
			
			//绘制刻度（分刻度）
			for(var i=0;i<60;i++){
				ctx.beginPath();
				ctx.lineWidth=3;
				//保存当前绘图环境
				ctx.save();
				
				//重置绘制的起始位置（将圆心位置重置为0.0）
				ctx.translate(250,250);//转换画布的用户坐标系统
				//旋转画布到一定的弧度             弧度=角度*PI/180
				ctx.rotate(i*6*Math.PI/180);
				//设置绘制线条的起始位置
				ctx.moveTo(0,140);
				//设置线条的结束位置
				ctx.lineTo(0,148);
				//绘制路劲
				ctx.stroke();
				
				
				
				//还原初始的绘图环境
				ctx.restore();
				ctx.closePath();
			}
			
			//绘制时针
			ctx.beginPath();
				ctx.lineWidth=5;
				//保存当前绘图环境
				ctx.save();
				
				//重置绘制的起始位置（将圆心位置重置为0.0）
				ctx.translate(250,250);//转换画布的用户坐标系统
				//旋转画布到一定的弧度             弧度=角度*PI/180
				ctx.rotate(hours*30*Math.PI/180);
				//设置绘制线条的起始位置
				ctx.moveTo(0,10);
				//设置线条的结束位置
				ctx.lineTo(0,-100);
				//绘制路劲
				ctx.stroke();
				//还原初始的绘图环境
				ctx.restore();
				ctx.closePath();
			
			
			//绘制分针
			ctx.beginPath();
				ctx.lineWidth=3;
				//保存当前绘图环境
				ctx.save();
				
				//重置绘制的起始位置（将圆心位置重置为0.0）
				ctx.translate(250,250);//转换画布的用户坐标系统
				//旋转画布到一定的弧度             弧度=角度*PI/180
				ctx.rotate(minutes*6*Math.PI/180);
				//设置绘制线条的起始位置
				ctx.moveTo(0,10);
				//设置线条的结束位置
				ctx.lineTo(0,-120);
				//绘制路劲
				ctx.stroke();
				//还原初始的绘图环境
				ctx.restore();
				ctx.closePath();
				
				
				//绘制秒针
			ctx.beginPath();
				ctx.lineWidth=1;
				ctx.strokeStyle='#f00';
				//保存当前绘图环境
				ctx.save();
				
				//重置绘制的起始位置（将圆心位置重置为0.0）
				ctx.translate(250,250);//转换画布的用户坐标系统
				//旋转画布到一定的弧度             弧度=角度*PI/180
				ctx.rotate(seconds*6*Math.PI/180);
				//设置绘制线条的起始位置
				ctx.moveTo(0,10);
				//设置线条的结束位置
				ctx.lineTo(0,-126);
				//绘制路劲
				ctx.stroke();
				//还原初始的绘图环境
				ctx.restore();
				ctx.closePath();
			}
			setInterval(draw,1000);
			
		</script>
			
			
			<div class="cloud-one">
				
				
		
				
				
			</div>
			<div class="cloud-two">
				
			</div>
			<div class="cloud-three">
				
			</div>
		</div>
			
		
		
	</body>
</html>