我是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();
}
index.js
chemical.addEventListener('click',function(e){
e.target.level--;
e.target.render();
solution.level++;
solution.render();
stage.update();
});
这是因为您首先移至(x,y):
this.graphics.moveTo(this.x,this.y);
然后再次将(x,y)添加到您的绘图调用中:
this.graphics.lineTo(this.x,this.y+(this.height-this.width/2)); // etc
您只想添加一次(x,y)。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句