javascrip图形编程

最新推荐文章于 2024-08-26 12:31:29 发布

chenke__hxx

最新推荐文章于 2024-08-26 12:31:29 发布

阅读量960

点赞数

分类专栏： javascript 文章标签： JavaScript 图形

本文链接：https://blog.csdn.net/chenke__hxx/article/details/17006681

版权

javascript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

这两天去图书馆借了几本书，准备去实习了，所以打算看点书，就顺便把javascript高效图形编程这本书的一个例子给写写。

这是一条动态的正玄曲线，看起来的确有点象flash，个人表示压力山大

<!DOCTYPE html>
<html>
<head>
	<title>Fast Sine Demonstration</title>
	<script type='text/javascript' src='http:libs.baidu.com/jquery/1.9.0/jquery.js'></script>
	<style type='text/css'>
		#draw-target{
			width: 480px;
			height: 320px;
			background: #000;
			position: relative;
		}
	</style>
	<script type='text/javascript'>
		$(document).ready(function(){
			(function(){
				var fastSin = function(steps){
					var table = [],
						ang = 0,
						angStep = (Math.PI * 2) / steps;

					do{
						table.push(Math.sin(ang));
						ang += angStep;
					}while(ang < Math.PI * 2);

					return table;
				};

				var sinTable = fastSin(4096);
				var $drawTarget = $('#draw-target'), 
					divs = '',
					i, bars, x = 0;

				// 使一个点按正玄曲线波动
				var drawGrap = function(ang, freq, height){
					var height2 = height * 2;
					for(var i = 0; i < 480; i++){
						bars[i].style.top = 160 - height + sinTable[(ang + (i * freq)) & 4095] * height + 'px';
						bars[i].style.height = height2 + 'px';
					}
				};

				for(i = 0; i < 480; i++){
					divs += '<div style = "position:absolute; width:1px; height:40px;background-color:#0d0;top:0px;left:' + i + 'px;"></div>';
				}
				$drawTarget.append(divs);
				bars = $drawTarget.children();

				var time = setInterval(function(){
					drawGrap(x * 50, 32 - (sinTable[(x * 20) & 4095] * 16), 50 - (sinTable[(x * 10) & 4095] * 20));
					x++;
				}, 20);

			})();
		});
	</script>
</head>
<body>
	<div id="draw-target"></div>
</body>
</html>