我正在使用内置在画布中的Javascripts绘制图形，以根据用户输入显示房屋贷款付款，贷款余额和净值。我无法使用任何其他形式的图形处理程序包，因为该代码是评估的一部分。
我的图形是通过将数据转换为X和Y坐标绘制的。输入贷款价格后，一些房屋贷款还款公式会计算已支付的总金额，然后将其除以画布宽度即可得出间距变量。该间距变量用于将美元金额转换为画布上的像素。使用类似的设置来获取年月间隔像素。
我遇到的问题是Javascript画布上的Y轴是颠倒的，0是画布的顶部，而280（我的画布高度）是在底部。到目前为止，仅通过交换“ +”和“-”运算符就可以解决此问题，但是，我当前正在创建在图形上绘制“贷款余额”线的代码，而倒置会引起问题似乎无法解决。这可能只是我没看到的简单问题，或者可能是需要解决的更复杂的问题，但是无论哪种方式，我都无法弄清楚。
X = 0; // same as before, iterators both set back to 0 for the new line.
iterator = 0;
c.beginPath // this next line is for loan balance, it starts at 300000 and goes down with each payment made, then back up with each bit of interest accrued.
// due to the fact that the y axis begins at the top, this means that the pixels for payments is added to the pixel count, and the interest accrued is taken away.
c.moveTo(0, loanLocation) // set starting point to x=0 y= loanLocation
while (X <= 510)// loan balance loop
{
X = X + 0.001; // iterates X by .001 each time, allowing an accurate subpixel resolution loop, see above for why this is needed.
iterator = iterator + 0.001;
if (iterator >= monthSpacing)
{
loanBalance = loanBalance - monthlyPayment + (monthlyInterest * loanBalance);
//alert(loanBalance);
//interestY =
//alert(interestY);
//alert(X + " " + monthSpacing);
loanY = loanY + paymentY - (loanY * monthlyInterest);
//alert(loanY);
//loanY = loanBalance * paySpacing;
c.lineTo(X, loanY);
iterator = 0;
}
}
c.strokeStyle = "black"
c.stroke(); // there is no fill for this line, so it is just left as a stroke.
这是画线的代码集，在它上面是一些正在使用的变量：
var X = 0;
var iterator = 0;
var monthSpacing = yearSpacing / 12;
//alert(yearSpacing);
//alert(monthSpacing);
var monthlyInterest = interest/1200; // this gives the montly interest rate, the monthly interest pixel amount is below
//alert(monthlyInterest);//debugging, comment out.
var paymentY = monthlyPayment * paySpacing;
var interestY = monthlyInterest * paySpacing; // this is inaccurate, the interestY needs to be gotten by multiplying the remaining loan balance by the
//monthly interest each month.
//var interestY; // will be used further down, must be calculated monthly so cannot be set outside of the line drawing loops.
var totalY = 280;
var equityY = 280;
var loanBalance = loan;
var loanY = loanLocation;
运行时，我得到期望结果的奇怪反演，我希望贷款余额线向下弯曲到零，但是相反，曲线发生在相反的方向，我尝试了两种不同的获取坐标的方法，即loanBalance方法，其中涉及使用美元值并将其转换为像素，以及loanY方式涉及直接使用像素值。
loanBalance提供了一条与所需线完全相反的线，它始于贷款价值，并以与我想要的方向完全相反的方向向上弯曲，我相信我为loanBalance方法使用的数学方法是准确的，由于Y轴的反转特性，我简直无法想到将美元值转换为像素的方法。
loanY提供了一条以“下降”为标题的线，但以越来越短的速度向下弯曲，这使我相信，尽管可以准确地计算出每月还款额的减法（由于反转而导致的加法），但加法（减法）每月利息的计算不正确。乘法不能像加法和减法那样简单地用除法代替，因此将这个值转换为像素非常困难。借位方式绘制的直线肯定会受到反演的影响，但并不是所需直线的完美反演，用于这种方式的数学显然很错误。
理想情况下，我想找到一种使用借贷方式的方法，它与程序的其余部分保持一致，并且在不使用美元等显而易见的价值时可以使用。如果需要的话，我将使用loanBalance方法。
如果您不确定我要问的是什么，或者所使用的代码是什么，我可以完整地发布该程序，如果有帮助的话。我还没有做到这一点，因为我不想让这个问题比我已经拥有的更多。
最佳答案
您可以像这样更改为笛卡尔坐标系：
// get a reference to your canvas element (eg it might have id='myCanvas')
var canvas=document.getElementById('myCanvas');
// get the context for the canvas
var context=canvas.getContext('2d');
// vertically flip the canvas so its Y origin is at the bottom
context.setTransform(1,0,0,-1,0,canvas.height);
这使得y == 0在画布的底部并向上增加。
如果您正在使用其他转换，则将此转换放在其他转换之前。