JavaScript. Подробное руководство, 6-е издание - [11]
>
> graph.width = graph.width; // Магия очистки элемента canvas
> // Если функция вызвана без аргументов или броузер не поддерживает
> // элемент
> 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; //Жирная линия
> g.stroke; //Нарисовать кривую графика
> g.fillStle="black"; //Черный цвет для текста
> g.fillText("Loan Balabce", 20, 50); //Элемент легенды
> //Нарисовать отметки лет на оси Х
> g.textAling="center"; //Текст меток по центру
> var y = amounToY(0); //Координата Y на оси X
> for (var year=1;year*12 <= payments; year++) { //Для каждого года
> var x=paymentToX(year*12); //Вычислить позицию метки
> g.fillRect(x-0.5, y-3, 1, 3); //Нарисовать метку
> if (year == 1) g.fillText("Year", x, y-5); // Подписать ось
> if (year % 5 == 0 && year*12 !== payments) // Числа через каждые 5 лет
> g.fillText(String(year), x, y-5);
> }
> //Суммы платежей у правой границы
> g.textAling="right"; //Текст по правому краю
> g.textBaseLine="middle"; //Центрировать по вертикали
> var ticks = [monthly*payments, principal]; //Вывести две суммы
> var rightEdge = paymentToX(payments); //Координата X на оси Y
> for (var i = 0; i < ticks.Length; i++) { //Для каждой из 2 сумм
> var y = amountToY(ticks[i]); //Определить координату Y
> g.fillRect(rightEdge - 3, y - 0.5, 3, 1); //Нарисовать метку
> g.fillText(String(ticks[i].toFixed(0)), //И вывести рядом сумму.
> rightEdge-5, y);
> }
>}
>
>