不断增加点

最新推荐文章于 2024-01-18 10:35:50 发布

sun-shadow

最新推荐文章于 2024-01-18 10:35:50 发布

阅读量496

点赞数

分类专栏： JavaScript HTML5 文章标签： javascript 2d html5

本文链接：https://blog.csdn.net/u013494746/article/details/39431967

版权

JavaScript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML5

5 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<style type="text/css">
			.canvas{
				background:#000;
				}
			</style>
		
		</head>
	<body>
		<canvas class="canvas" ></canvas>
			<script type="text/javascript">
				var S = {
					start: function(){
						Drawing.init();
						var d = new Dot(5,20);
						Drawing.loop(function (){
							d.move();
							});
						}
					};
				Dot = function(x,y){
					this.x = x;
					this.y = y;
					this.z = 5;
					this.h =1;
					};
				Dot.prototype = {
					move: function(){
						this.x = Math.random() * window.innerWidth ;
						this.y = Math.random() * window.innerHeight ;
						Drawing.drawDot(this);
						}
					};
				Drawing = (function(){
					var canvas,context,animatefn,
							requestFrame = window.requestAnimateFrame ||
														 window.webkitRequestAnimationFrame ||
														 window.mozRequestAnimationFrame ||
														 window.oRequestAnimateFrame ||
														 window.msRequestAnimateFrame ||
														 function(callback){
														 	window.setTimeout(callback,1000/60);
														 	};
					return {
						init: function(){
						canvas = document.querySelector('.canvas');
						context = canvas.getContext('2d');
						canvas.width = window.innerWidth;
						canvas.height = window.innerHeight;
						},
						drawDot: function(dot){
							context.fillStyle = '#fff';
							context.beginPath();
							context.arc(dot.x ,dot.y ,dot.z,0,2 * Math.PI,true);
							context.closePath();
							context.fill();
							},
						clearAnimate: function(){
							context.clearRect(0,0,canvas.width,canvas.height);
							},
						loop: function(fn){
							animatefn = !animatefn ? fn : animatefn;
							//this.clearAnimate();
							animatefn();
							requestFrame.call(window,this.loop.bind(this));
							}
						}
					}());
					S.start();
				</script>
		</body>
</html>