function arrow(canvas,obj,posArr,colorArr,animateArr) {
    //canvas和2d对象
    this.canvas=canvas;
    this.obj=obj;
    //固定位置（起始点，结束点）
    this.grapos=animateArr?animateArr[0]:0.2; //渐变起始点
    this.speed=animateArr?animateArr[1]:0.05;  //控制动画的速度
    
    this.num=50;//控制动画的时长
    this.flag=true;//动画的开关

    //绘制箭头的点坐标
    this.pos1_x=posArr[0];//上曲线起点坐标            **************渐变起点*************************
    this.pos1_y=posArr[1];

    this.pos2_x=posArr[2];//控制点1的坐标
    this.pos2_y=posArr[3];

    this.pos3_x=posArr[4];//上曲线终点坐标
    this.pos3_y=posArr[5];


    //箭头三角的坐标
    this.pos4_x=posArr[6];
    this.pos4_y=posArr[7];

    this.pos5_x=posArr[8];//                       ********************渐变终点**********************
    this.pos5_y=posArr[9];

    this.pos6_x=posArr[10];
    this.pos6_y=posArr[11];


    //下曲线起点坐标
    this.pos7_x=posArr[12];
    this.pos7_y=posArr[13];

    //下曲线控制点坐标
    this.pos8_x=posArr[14];
    this.pos8_y=posArr[15];

    //渐变的颜色设置
    this.beginColor=colorArr?colorArr[0]:"rgba(255,255,255,0)";
    this.moveColor=colorArr?colorArr[1]:"rgba(33,126,216,0.5)";
    this.endColor=colorArr?colorArr[2]:"rgba(33,126,216,1)";
}

arrow.prototype={
    draw:function () {
        var gra=this.obj.createLinearGradient(this.pos1_x,this.pos1_y,this.pos6_x,this.pos6_y);
        gra.addColorStop(0, this.beginColor);
        gra.addColorStop(this.grapos, this.moveColor);
        gra.addColorStop(1, this.endColor)

        //上曲线
        this.obj.beginPath();
        this.obj.moveTo(this.pos1_x, this.pos1_y);   //箭头尾部(起始点)
        this.obj.quadraticCurveTo(this.pos2_x, this.pos2_y, this.pos3_x, this.pos3_y);  //绘制上曲线

        //三角
        //this.obj.lineTo(225, 120);
        this.obj.lineTo(this.pos4_x, this.pos4_y);
        this.obj.lineTo(this.pos5_x, this.pos5_y);
        this.obj.lineTo(this.pos6_x, this.pos6_y);
        this.obj.lineTo(this.pos7_x, this.pos7_y)

        //下曲线
        this.obj.quadraticCurveTo(this.pos8_x, this.pos8_y, this.pos1_x, this.pos1_y);
        this.obj.fillStyle = gra;
        this.obj.fill();
    },

    //动画
    play:function () {
        this.flag=false;
        var that=this;
        var t1=setInterval(function () {
            that.num--;
            if (that.num<=0){
                clearInterval(t1);
                that.obj.clearRect(0,0,1000,1000);
                that.flag=true;
                that.num=50;
                return;
            }
            if (that.grapos > 0.9) {
                that.grapos = 0.2;
            } else {
                that.grapos += that.speed;
            }
            that.obj.clearRect(0,0,1000,1000)
            that.draw();
        },100)
    },
    
    //清空画布操作
    clearAll:function () {
        this.obj.clearRect(0,0,1000,1000);
    }
    
}