2018-07-08

g.lineTo(paymentToX(payments), amountToY(0)); // Down to lower right

用当前画笔画一条线，从当前位置连到一个指定的点。这个函数调用完毕，当前位置变成x,y。

与MoveTo函数配合使用

lineTo和rLineTo的区别:即一个是直接给出坐标点位置，一个是给出偏移量。

g.closePath(); // And back to start

CanvasRenderingContext2D.closePath() 是 Canvas 2D API 将笔点返回到当前子路径起始点的方法。它尝试从当前点到起始点绘制一条直线。 如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作。
摘自 beginPath()和closePath()这两个函数什么时候用

g.fillStyle = "#f88"; // Light red
g.fill(); // Fill the triangle

canvas beginPath()和closePath()

g.font = "bold 12px sans-serif"; // Define a font
g.fillText("Total Interest Payments", 20,20); // Draw text in legend

context.fillText(text,x,y,maxWidth);
在canvas中绘制文本

// Cumulative equity is non-linear and trickier to chart
累计股票是非线性 难以转换为图表
var equity = 0;
g.beginPath(); // Begin a new shape
//开始新图形
g.moveTo(paymentToX(0), amountToY(0)); // starting at lower-left
for(var p = 1; p <= payments; p++) {
// For each payment, figure out how much is interest
计算每次付款，所支付的利息。
var thisMonthsInterest = (principal-equity)*interest;
equity += (monthly - thisMonthsInterest); // The rest goes to equity
g.lineTo(paymentToX(p),amountToY(equity)); // Line to this point
}
g.lineTo(paymentToX(payments), amountToY(0)); // Line back to X axis
g.closePath(); // And back to start point
g.fillStyle = "green"; // Now use green paint
g.fill(); // And fill area under curve
g.fillText("Total Equity", 20,35); // Label it in green
// Loop again, as above, but chart loan balance as a thick black line
var bal = principal;
g.beginPath();
g.moveTo(paymentToX(0),amountToY(bal));
for(var p = 1; p <= payments; p++) {
var thisMonthsInterest = bal*interest;
bal -= (monthly - thisMonthsInterest); // The rest goes to equity
g.lineTo(paymentToX(p),amountToY(bal)); // Draw line to this point
}
设置绘画相关的参数：
g.lineWidth = 3; // Use a thick line
g.stroke(); // Draw the balance curve
g.fillStyle = "black"; // Switch to black text
g.fillText("Loan Balance", 20,50); // Legend entry
// Now make yearly tick marks and year numbers on X axis
g.textAlign="center"; // Center text over ticks
var y = amountToY(0); // Y coordinate of X axis
for(var year=1; year*12 <= payments; year++) { // For each year
var x = paymentToX(year*12); // Compute tick position

g.fillRect(x-0.5,y-3,1,3); // Draw the tick

context.fillRect(x,y,width,height);
用来绘制矩形

if (year == 1) g.fillText("Year", x, y-5); // Label the axis
if (year % 5 == 0 && year*12 !== payments) // Number every 5 years
g.fillText(String(year), x, y-5);
}
// Mark payment amounts along the right edge
g.textAlign = "right"; // Right-justify text
textAlign是css中设置字体水平居中的
g.textBaseline = "middle"; // Center it vertically

textBaseline 属性设置或返回在绘制文本时的当前文本基线。
CanvasRenderingContext2D.textBaseline

var ticks = [monthly*payments, principal]; // The two points we'll mark
var rightEdge = paymentToX(payments); // X coordinate of Y axis
for(var i = 0; i < ticks.length; i++) { // For each of the 2 points
var y = amountToY(ticks[i]); // Compute Y position of tick
g.fillRect(rightEdge-3, y-0.5, 3,1); // Draw the tick mark
g.fillText(String(ticks[i].toFixed(0)), // And label it.
rightEdge-5, y);
}
}
</script>
</body>
</html>

最后，发现网上已经有各种修改版：
1 注释可以参考
2 想法可以参考