1. Главная
  2. Книги
  3. Флэнаган Дэвид
  4. JavaScript. Подробное руководство, 6-е издание
  5. Страница 17
Выбрать главу

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

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

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

  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;     //Жирная линия

  g.stroke;            //Нарисовать кривую графика

~ 17 ~