Javascript createjs:Shape在单击时神秘地移动

我不熟悉HTML5和JavaScript。我正在做一个非常简单的“画布”项目，在这个项目中，你有两个试管，点击其中一个可以降低它的水平，增加另一个的水平

我已经编写了代码来实现这一点，它是有效的，唯一的问题是，当我点击试管时，它在屏幕上呈对角线移动，我不知道是什么导致了它

如果您能通读代码并告诉我问题出在哪里，那就太好了：

TestTube.js

TestTube.prototype.render = function(){


    this.graphics.clear();

    this.graphics.setStrokeStyle(2,1,1);
    //set stroke color black.
    this.graphics.beginStroke("#000000");
    //set fill color 
    this.graphics.beginFill(this.color);


    //START DRAWING------------------------------------

    //move to origin.
    this.graphics.moveTo(this.x,this.y);

    //draw line down to point of liquid in test tube [liquid start point]

    _level = (100 - this.level)/100;
    this.graphics.lineTo(this.x,this.y+_level*this.height);

    //draw line uptil bottom of test tube.
    this.graphics.lineTo(this.x,this.y+(this.height-this.width/2));

    //draw the round part of test tube.
    //graphics.arc(centerX,centerY,radius,startAngle,endAngle,anticlockwise);
    this.graphics.arc(this.x + this.width/2,this.y+(this.height-this.width/2),this.width/2,Math.PI,0,true);

    //go back to upto level of liquid in tube [liquid end point]
    this.graphics.lineTo(this.x+this.width,this.y+_level*this.height);

    //connect liquid start point with liquid end point to fill in liquid colour.
    this.graphics.lineTo(this.x,this.y+_level*this.height);
    this.graphics.endFill();

    //go back to liquid end point
    this.graphics.moveTo(this.x+this.width,this.y+_level*this.height);

    //draw the rest of the test tube.
    this.graphics.lineTo(this.x+this.width,this.y);

    //stop drawing.
    this.graphics.endStroke();

}

chemical.addEventListener('click',function(e){
            e.target.level--;
            e.target.render();
            solution.level++;
            solution.render();
            stage.update();
        });

index.js

TestTube.prototype.render = function(){


    this.graphics.clear();

    this.graphics.setStrokeStyle(2,1,1);
    //set stroke color black.
    this.graphics.beginStroke("#000000");
    //set fill color 
    this.graphics.beginFill(this.color);


    //START DRAWING------------------------------------

    //move to origin.
    this.graphics.moveTo(this.x,this.y);

    //draw line down to point of liquid in test tube [liquid start point]

    _level = (100 - this.level)/100;
    this.graphics.lineTo(this.x,this.y+_level*this.height);

    //draw line uptil bottom of test tube.
    this.graphics.lineTo(this.x,this.y+(this.height-this.width/2));

    //draw the round part of test tube.
    //graphics.arc(centerX,centerY,radius,startAngle,endAngle,anticlockwise);
    this.graphics.arc(this.x + this.width/2,this.y+(this.height-this.width/2),this.width/2,Math.PI,0,true);

    //go back to upto level of liquid in tube [liquid end point]
    this.graphics.lineTo(this.x+this.width,this.y+_level*this.height);

    //connect liquid start point with liquid end point to fill in liquid colour.
    this.graphics.lineTo(this.x,this.y+_level*this.height);
    this.graphics.endFill();

    //go back to liquid end point
    this.graphics.moveTo(this.x+this.width,this.y+_level*this.height);

    //draw the rest of the test tube.
    this.graphics.lineTo(this.x+this.width,this.y);

    //stop drawing.
    this.graphics.endStroke();

}

chemical.addEventListener('click',function(e){
            e.target.level--;
            e.target.render();
            solution.level++;
            solution.render();
            stage.update();
        });

---

这是因为您首先移动到（x，y）：

然后再次将（x，y）添加到绘图调用：

 this.graphics.lineTo(this.x,this.y+(this.height-this.width/2)); // etc

---

您只想添加（x，y）一次。

但我只是在这里添加值；我没有给'this.y'或'this.y'赋值