var qcanvas = new Qcanvas({
		id: 'qcanvas',
	    width: 300,
	    height: 200,
    });

    var greenRect = qcanvas.rect({
        start: [0, 0],
        width: 200,
        height: 200,
        // drag:false,
        borderColor: 'green',
        fillColor: 'green',
    })

    var redRect = qcanvas.rect({
        start: [100, 100],
        width: 50,
        height: 50,
        borderColor: 'red',
        fillColor: 'red',
        // degree:30
        // drag:false
    })

    var blueRect = qcanvas.rect({
        start: [120, 140],
        width: 50,
        height: 50,
        borderColor: 'blue',
        fillColor: 'blue',
        // drag:false
    })









    //group元素
    var group = qcanvas.group();
    console.log(group);

    group.push(redRect);

    group.push(blueRect);




    qcanvas.load({
        "person": "../img/spirit1.png",
    }, function() {

        var spiritSource = qcanvas.getSourceByName("person");

        var s = qcanvas.spirit({
            img: spiritSource,
            row: 1,
            column: 8,
            framesIndex: [0, 0],
            tStart: [0, 120],
            tWidth: 40,
            tHeight: 64,
            isLoop: true,
            during: 1,
            mouseup: function() {
                console.log(this);
                console.log('触发mouseup事件');
            }
        })

        var t = qcanvas.text({
            start: s.tStart,
            text: '我是来自group容器里spirit',
            color: '#000',
            pointerEvent: 'none'
        })



        group.push(t);
        group.push(s);

    })


    qcanvas.text({
        start: [200, 20],
        text: 'greenRect上移一层',
        color: "yellow",
        drag: false,
        mouseup: function() {
            qcanvas.raise(greenRect);
        }
    })

    qcanvas.text({
        start: [200, 40],
        text: 'greenRect下移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            qcanvas.lower(greenRect);
        }
    })

    qcanvas.text({
        start: [200, 60],
        text: 'redRect上移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            group.raise(redRect);
        }
    })
    qcanvas.text({
        start: [200, 80],
        text: 'redRect下移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            group.lower(redRect);
        }
    })

    qcanvas.text({
        start: [200, 100],
        text: 'group下移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            qcanvas.lower(group);
        }
    })

    qcanvas.text({
        start: [200, 120],
        text: 'group上移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            qcanvas.raise(group);
        }
    })