Canvas learn demo, page effect of evenYou

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Transform</title>
</head>
<body>
	<canvas id="mycanvas"></canvas>
	<script>
       function All(){
       	  this.canvas = document.getElementById('mycanvas');
       	  this.ctx = this.canvas.getContext('2d');
       	  this.pr = window.devicePixelRatio || 1;//The ratio of physical pixel resolution and CSS pixel resolution
       	  this.windowW = document.documentElement.clientWidth;//Screen width
       	  this.heightH = document.documentElement.clientHeight;//Screen height
       	  this.canvas.width = this.windowW * this.pr;
       	  this.canvas.height = this.heightH * this.pr;
       	  this.v = Math.cos;//cosine value
       	  this.u = Math.PI * 2;//Pi
       	  this.z = Math.random;//Random number
       	  this.ctx.scale(this.pr,this.pr);
          this.ctx.globalAlpha = 0.6;//Set transparency
          this.q = [];
          this.f = 100;
          this.r = 0;
          this.init = function(){//initialization
          	this.logic();
          }
          this.draws = function(i,j){
            this.ctx.beginPath();
            this.ctx.moveTo(i.x,i.y);
            this.ctx.lineTo(j.x,j.y);
            var k = j.x + (this.z() * 2 -.25) * this.f;
              n = this.count(j.y);
            this.ctx.lineTo(k,n);
            this.ctx.closePath();
            this.r -= this.u / -50;
            this.ctx.fillStyle = '#' + (this.v(this.r) * 150 + 151 << 16 | this.v(this.r + this.u / 3) * 150 + 151 << 8 | this.v(this.r + this.u / 3 * 2) * 150 + 151).toString(16);//随机相似颜色
            this.ctx.fill();
            this.q[0] = this.q[1];
            this.q[1] = {x: k, y: n};
          }
          var self = this;
          this.logic = function(){
            setInterval(function(){
            	self.ctx.clearRect(0,0,self.canvas.width,self.canvas.height);
	            self.q = [{x:0, y:self.canvas.height*.7+self.f},{x:0, y:self.canvas.height*.7-self.f}];
	            while(self.q[1].x<self.canvas.width+self.f){
            	   self.draws(self.q[0],self.q[1])
            	}
            },1000);
            
            //requestAnimationFrame(self.logic);
          }
          this.count = function(p){
             var t = p + (this.z() * 2 - 1.1) * this.f;
             return (t > this.canvas.height || t < 0) ? this.count(p) : t;
          }
       }
		window.onload = function(){
           var done = (new All).init();
		}


	</script>
</body>
</html>
Copy the code and it works! The code seems simple, but the algorithm inside is not simple. Every step needs to be carefully considered before it can be written.
Canvas learn demo, page effect of evenYou

Guess you like
