canvas绘制渐变图案-CSDN博客

就是有点晃眼!
随机截取图片三张.如下:
[img]http://dl2.iteye.com/upload/attachment/0119/9484/6250475b-6464-337c-88eb-b75adcf5a419.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0119/9480/c1161a94-a850-38f2-9da6-22e5f4a7b55a.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0119/9482/918c059b-b3b0-3a08-bec6-6dc181fe1c1b.png[/img]

代码:


<!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>