Canvas放射线动画

59580
59580 发布于 2017-02-14 17:58:21 浏览:898 类型:原创 - 随笔 分类:JavaScript - JavaScript 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body {background: #000;overflow: hidden;margin: 0;padding: 0;}
			#canv {width: 45%;margin: 5% 30%;animation: wheel-rotate 30s linear infinite;}
			@keyframes wheel-rotate {
				from {
					transform: rotate(0deg);
				}
				to {
					transform: rotate(360deg);
				}
			}
		</style>
	</head>

	<body>
		<canvas id="canv" width="600" height="600"></canvas>
		<script type="text/javascript">
			var c;
			var $;
			var w = 600;
			var h = 600;
			constant = 15;
			var rad = 300;
			var timeout = 0;
				c = document.getElementById("canv");
				$ = c.getContext("2d");
				drawLines();
			function drawLines() {
				$.fillRect(0,0,w,h);
				$.translate(w/2,h/2);
				for (var i = 0; i < 25; i++) {
					for (var n = -45; n <= 45; n+=constant) {
						setTimeout("draw("+n+");",100 * timeout);
						timeout++;
					}
				}
			}
			
			function draw(n){
				$.beginPath();
				$.moveTo(0,rad);
				var radians = Math.PI/180*n;
				var x = (rad * Math.sin(radians)) / Math.sin(Math.PI/2 - radians);
				$.lineTo(x,0);
			
				if (Math.abs(n) == 45) {
					$.strokeStyle=rndColor();
					$.lineWidth=2;
				} else if (n == 0) {
					$.strokeStyle="rgb(200,200,200)";
					$.lineWidth=.5;
				} else {
					$.strokeStyle="rgb(110,110,110)";
					$.lineWidth=.5;
				}
				$.stroke();
				$.rotate((Math.PI/180)*15);
			}
			
			function rndColor() {
			    var r = 255*Math.random()|0,
			        g = 255*Math.random()|0,
			        b = 255*Math.random()|0;
			    return 'rgb(' + r + ',' + g + ',' + b + ')';
			}
			function myrefresh(){
       				//window.location.reload();
       				//drawLines()
			}
			//setTimeout('myrefresh()',100*175);
		</script>
	</body>

</html>
标签:
z
给个赞 12 人点赞
收藏 20 人收藏
评论 已有 1 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
15295751328
152957513286 天前2F
很厉害的效果.收藏了
举报 支持 (0) 回复 (0)
59580 59580 作者

作者最新