Javascript-Quelltext

function draw(){
				var canvas = document.getElementById('canvas');
				if (canvas.getContext){
					ctx = canvas.getContext('2d');
				}
				circle = new Array();
				circle[0] = new CanvasCircle(120,150,26,40,"#fe6622");
				circle[1] = new CanvasCircle(234,190,10,25,"#fedcba");
				circle[2] = new CanvasCircle(150,220,25,30,"#abcdef");
				circle[3] = new CanvasCircle(240,100,25,45,"#2c4f1a");
				setInterval("renderAll(circle);",400);
			}
			function renderAll(renderThis){
				ctx.clearRect(0,0,500,500);
				for(i=0;i<renderThis.length;i++){
					renderThis[i].render();
				}
			}
			function CanvasCircle(x,y,minSize,maxSize,color){
				this.x=x;
				this.y=y;
				this.minSize=minSize;
				this.maxSize=maxSize;
				this.color=color;
				this.size = (maxSize+minSize)/2;
				this.change = "up";
				this.scaleChangeAC = "AC";
				this.scaleChangeBD = "BD";
				this.minScaleAC = 0.5;//x-scale-richtung
				this.minScaleBD = 0.3;//y-scale-richtung
				this.maxScaleAC = 1.5;//maximal scale in x-richtung
				this.maxScaleBD = 1.2;
				this.scaleAC = 1;//aktueller scale in x richtung
				this.scaleBD = 1;
				this.scaleStepsAC = 0.01;//Abstände zwischen den Scales
				this.scaleStepsBD = 0.01;
			}
			function renderCanvasCircle() {
				//Size
				if(this.change == "up" && this.size >= this.maxSize){
					this.change = "down";
				}
				else if(this.change == "down" && this.size <= this.minSize){
					this.change = "up";
				}
				
				if(this.change == "up"){
					this.size++;
				}
				else{
					this.size--;
				}
				//ScaleAC
				if(this.scaleChangeAC == "AC" && this.scaleAC >= this.maxScaleAC){
					this.scaleChangeAC = "CA";
				}
				else if(this.scaleChangeAC == "CA" && this.scaleAC <= this.minScaleAC){
					this.scaleChangeAC = "AC";
				}
				
				if(this.scaleChangeAC == "AC"){
					this.scaleAC = this.scaleAC+this.scaleStepsAC;
				}
				else{
					this.scaleAC = this.scaleAC-this.scaleStepsAC;
				}
				
				ctx.fillStyle = this.color;
				ctx.scale(this.scaleAC,this.scaleBD);
				ctx.beginPath();
				ctx.arc(this.x,this.y,this.size,0,Math.PI*2, true);
				ctx.closePath();
				ctx.fill();
			}
			CanvasCircle.prototype.render=renderCanvasCircle;