canvas绘制渐变图案

就是有点晃眼!
随机截取图片三张.如下:
代码:
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#btn {
				position: relative;
			}
			
			table {
				text-align: center;
				border-collapse: collapse;
				border: solid 2px;
			}
			
			button {
				width: 495px;
				font-size: 15px;
			}
		</style>
	</head>
	<center>

		<body>
			<table border="" cellspacing="" cellpadding="">
				<tr>
					<th><canvas id="cav" width="500" height="500"></canvas></th>
				</tr>
				<tr>
					<td>
						<div id="">
							<button id="btn_start" onclick="">开始</button>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div id="">
							<button id="btn_stop" onclick="">暂停</button>
						</div>
					</td>
				</tr>
			</table>

		</body>
	</center>
	<script type="text/javascript">
		var cav = document.getElementById("cav");
		var context = cav.getContext("2d");
		var cavsize = 500;
		var num = 0.1;	//间距;
		var addnum = 0.0005;	//每次间距增加量;
		var posit = 2;	//
		var numup = true;	//是否处于间距增加阶段;
		var time = 100;	//定时器定时;
		var inter;
		document.getElementById("btn_start").onclick = function() {
			clearInterval(inter);
			inter = setInterval("draw()", time);
		}

		$("#btn_stop").click(function() {
			clearInterval(inter);
		})

		function draw() {
			context.beginPath();
			//间距扩大;
			if(numup && num < 2) {
				num = num + addnum;
				//从中心往外作图;
				for(var r = 0; r < cavsize / 2; r = r + num) {
					context.arc(cavsize / 2, cavsize / 2, r, posit * r * Math.PI, (posit * r + num) * Math.PI);
				}
				redraw();
				//设置边界,用于反复,不会停下;
				if(num >= 2) {
					numup = false;
					randomchange();
				}
			} 
			//间距缩小;
			else if(!numup && num > 0) {
				num = num - addnum;
				for(var r = 0; r < cavsize / 2; r = r + num) {
					context.arc(cavsize / 2, cavsize / 2, r, posit * r * Math.PI, (posit * r + num) * Math.PI);
				}
				redraw();
				if(num <= 0.1) {
					numup = true;
					num = Math.random() * 0.8 + 0.1;
					randomchange();
				}
			}
		}
		
		//清空重画;
		function redraw() {
			context.clearRect(0, 0, cavsize, cavsize);
			context.stroke();
		}
		
		//随机增加量,调节计时器时间间隔;
		function randomchange() {
			addnum = Math.random() * 0.002 + 0.0005;
			time = 100 * addnum * 1000;
		}
	</script>

</html>
canvas绘制渐变图案

猜你喜欢
