var DrawImage = (function (doc) {
	var DrawImage = function(canvasWidth, canvasHeight, x, y, a, b, bRadios, eRadios, color, dirction){
		this.bgCanvasCtx = null;
		this.moveCanvasCtx = null;
		this.color = color;
		this.context = null;
		this.x = x;
		this.y = y;
		this.a = a;
		this.b = b;
		this.beginRadios = bRadios;
		this.endRadios = eRadios;
		//this.currentRadios = this.endRadios;
		this.canvasWidth = canvasWidth;
		this.canvasHeight = canvasHeight;
		this.dirction = dirction || "small-to-big";//运动的方向, 从小的弧度运动到大的弧度
		
		this.init();
	};
	
	DrawImage.prototype.init = function(){
		this.bgCanvasCtx = doc.createElement("canvas");
//						
		this.bgCanvasCtx.setAttribute("width", this.canvasWidth);
		this.bgCanvasCtx.setAttribute("height", this.canvasHeight);
		
		this.moveCanvasCtx = doc.createElement("canvas");
		var moveCtx = this.moveCanvasCtx.getContext("2d");
		
		this.moveCanvasCtx.setAttribute("width", this.canvasWidth);
		this.moveCanvasCtx.setAttribute("height", this.canvasHeight);
		
		this.context = doc.createElement("div");
		this.context.appendChild(this.bgCanvasCtx);
		this.context.appendChild(this.moveCanvasCtx);
		
		this.context.className = "canvas-content";
		
		this.drawRadius();
		this.drawMoveRadius();
	};
	
	DrawImage.prototype.drawRadius = function(){
		var context = this.bgCanvasCtx.getContext("2d");
		context.save();
	    var r = 1/this.a; // ①注意：此处r可以写死，不过不同情况下写死的值不同
	    context.beginPath();
//				    context.moveTo(x + a, y);
		context.strokeStyle = this.color;
	    var index = 0;
	    for(var i = this.beginRadios; i < this.endRadios; i += r) {
	    	if(index % 6 === 0 || index % 6 === 1 || index % 6 === 2){
	    		context.lineTo(this.x + this.a * Math.cos(i), this.y + this.b * Math.sin(i));
	    	}else{
	    		context.moveTo(this.x + this.a * Math.cos(i), this.y + this.b * Math.sin(i));
	    	}
	    	index ++;
	    }
	    context.closePath();
	    context.stroke();
	    context.restore();
	};
	
	DrawImage.prototype.drawMoveRadius = function(){
		var that = this;
		if(this.dirction === "small-to-big"){
			this.currentRadios = this.endRadios;
		}else if(this.dirction === "big-to-small"){
			this.currentRadios = this.beginRadios;
		}
	    setInterval(function(){
	    	that.moveCircle();
	    }, 1000 / 30);
	};
	
	DrawImage.prototype.moveCircle = function(){
		var r = 1 / this.a;
		if(this.dirction === "small-to-big"){
			if(this.currentRadios > this.beginRadios){
		    	this.currentRadios -= r;
		    }else{
		    	this.currentRadios = this.endRadios;
		    	return ;
		    }
		}else if(this.dirction === "big-to-small"){
			if(this.currentRadios < this.endRadios){
		    	this.currentRadios += r;
		    }else{
		    	this.currentRadios = this.beginRadios;
		    	return ;
		    }
		}
		
	    var context = this.moveCanvasCtx.getContext("2d");
	    var x = this.x + this.a * Math.cos(this.currentRadios);
	    var y = this.y + this.b * Math.sin(this.currentRadios);
	    context.save();
	    context.strokeStyle = this.color;
	    context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
	    
		context.beginPath();
	    this.drawPoint(x, y);
	    context.closePath();
	    context.stroke();
	    context.restore();
	};
	
	DrawImage.prototype.getInstace = function(){
		return this.context;
	};
	
	DrawImage.prototype.drawPoint = function(x, y) {
		var ctx = this.moveCanvasCtx.getContext("2d");
        ctx.save();
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(x, y, 3, 2 * Math.PI, false);
        ctx.fill();
        ctx.closePath();
        ctx.restore();
    }
	
	return DrawImage;
})(document);