JavaScript. Подробное руководство, 6-е издание (Флэнаган) - страница 20

>

>  // элемент , то просто вернуть управление,

>  if (arguments.length == 0 || !graph.getContext) return;


>  // Получить объект "контекста" для элемента ,

>  // который определяет набор методов рисования

>  var g = graph.getContext("2d"); // Рисование выполняется с помощью этого объекта

>  var width = graph.width, height = graph.height; // Получить размер холста


>  // Следующие функции преобразуют количество месячных платежей

>  // и денежные суммы в пикселы

>  function paymentToX(n) { return n * width/payments; }

>  function amountToY(a) { return height-(a*height/(monthly*payments*1.05));}


>  // Платежи - прямая линия из точки (0,0) в точку (payments,monthly*payments)

>  g.moveTo(paymentToX(0), amountToY(0)); // Из нижнего левого угла

>  g.lineTo(paymentToX(payments),         // В правый верхний

>     amountToY(monthly*payments));

>  g.lineTo(paymentToX(payments), amountToY(0)); // В правый нижний

>  g.closePath();                         // И обратно в начало

>  g.fillStyle = "#f88";                  // Светло-красный

>  g.fill();                              // Залить треугольник

>  g.font = "bold 12px sans-serif";       // Определить шрифт

>  g.fillText("Total Interest Payments", 20,20); // Вывести текст в легенде


>  // Кривая накопленной суммы погашения кредита не является линейной

>  // и вывод ее реализуется немного сложнее

>  var equity = 0;

>  g.beginPath(); // Новая фигура

>  g.moveTo(paymentToX(0), amountToY(O)); // из левого нижнего угла

>  for(var р = 1; р <= payments; р++) {

>    // Для каждого платежа выяснить долю выплат по процентам

>    var thisMonthsInterest = (principal-equity)*interest;

>    equity += (monthly - thisMonthsInterest);  // Остаток - погашение кред.

>    g.lineTo(paymentToX(p),amountToY(equity)); // Линию до этой точки

>  }

>  g.lineTo(paymentToX(payments), amountToY(O)); // Линию до оси X

>  g.closePath();                                // И опять в нач. точку

>  g.fillStyle = "green";                        // Зеленый цвет

>  g.fill();                                     // Залить обл. под кривой

>  g.fillText("Total Equity", 20,35);            // Надпись зеленым цветом


>  // Повторить цикл, как выше, но нарисовать график остатка по кредиту

>  var bal = principal;

>  g.beginPath();

>  g.moveTo(paymentToX(O),amountToY(bal));

>  for(var p = 1; p <= payments; p++) {

>    var thisMonthsInterest = bal*interest;

>    bal -= (monthly - thisMonthsInterest) //Остаток от погаш. по кредиту

>    g.lineTo(paymentToX(p),amountToY(bal)); // Линию до этой точки

>  }

>  g.LineWidth = 3;     //Жирная линия