homework/2018-03-20/script.js


/* ООП в функциональном стиле
Создайте базовый класс Figure, который будет хранить координаты (x, y) 
и цвет фигуры. На базе класса Figure создайте три класса – 
Line, Rect, Circle, каждый из которых создает соответствующую фигуру. 
Пример создания экземпляров каждого класса и параметры фигур:

var line = new Line(50, 250, 200, 200, 'red'); // x1, y1, x2, y2, color
var circle = new Circle(120, 120, 50, 'green'); // x, y, r, color
var rect = new Rect(260, 130, 60, 120, 'blue'); // x, y, w, h, color

Все три класса-наследника имеют метод draw для 
рисования фигуры с соответствующими параметрами 
(координаты, размеры, цвет).

Фигуры рисуются на Canvas. Для рисования на канвасе создайте 
еще один класс – Canvas, в котором инициализируется 
элемент <canvas> из DOM. Класс Canvas – final, он не наследуется. 
В этом классе есть метод add, который и отображает созданные вами 
фигуры на странице. Обратите внимание, добавлять фигуры на канвас 
можно как по отдельности, так и списком.

var drawArea = new Canvas('canvasID');
drawArea.add(line);
drawArea.add(circle, rect);

<canvas id="canvasID"></canvas> */



function Figure(x, y, color){
    this.x = x;
    this.y = y;
    this.color = color;
}

function Line(x, y, x2, y2, color) {
    Figure.call(this, x, y, color);
    this.x2 = x2;
    this.y2 = y2;
    this.draw = function (ctx) {
        ctx.beginPath();
        ctx.moveTo(this.x, this.y);
        ctx.lineTo(this.x2, this.y2);
        ctx.strokeStyle = this.color;
        ctx.stroke();
    };
}
function Rect(x, y, w, h, color) {
    Figure.call(this, x, y, color);
    this.w = w;
    this.h = h;
    this.draw = function (ctx) {
        ctx.beginPath();
        ctx.rect(this.x, this.y, this.w, this.h);
        ctx.fillStyle = this.color;
        ctx.fill();
    };
}
function Circle(x, y, r, color) {
    Figure.call(this, x, y, color);
    this.radius = r;
    this.draw = function (ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
        ctx.fillStyle = this.color;
        ctx.fill();
    };
}

function Canvas(self) {
    var painter = document.querySelector(self);
    this.ctx = painter.getContext("2d");
    painter.height = 1000;
    painter.width = 1000;
    this.add = function () {
        var ctx = this.ctx;
        [].forEach.apply(arguments, [function (element) {
            element.draw(ctx);
        }]);
    };
}
var drawArea = new Canvas("#canvasID");
var line1 = new Line(50, 250, 200, 200, "red");
var line2 = new Line(70, 270, 220, 220, "red");
var line3 = new Line(280, 50, 310, 500, "green");
var circle1 = new Circle(120, 120, 50, "green");
var circle2 = new Circle(150, 150, 50, "yellow");
var rect1 = new Rect(260, 260, 60, 120, "blue");
var rect2 = new Rect(350, 350, 300, 100, "black");
drawArea.add(line1,line2, rect1, rect2, circle1, circle2);
drawArea.add(line3);