homework/20.03/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 Circle(x,y,r,color) {
		Figure.call(this,x,y,color);
		this.r = r;
	};
	
	Circle.prototype.draw = function(par) {
		par.fillStyle = this.color;
		par.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
		par.fill();
	};

	function Rect(x,y,w,h,color) {

		Figure.call(this,x,y,color);
		this.w = w;
		this.h = h;
	};
	Rect.prototype.draw = function(par) {

		par.fillStyle = this.color;
		par.fillRect(this.x, this.y, this.x+this.w, this.y+this.h);
	};
	
	function Line(x1,y1,x2,y2,color) {

		Figure.call(this,x1,y1,color);
		this.x2 = x2;
		this.y2 = y2;
	};
	Line.prototype.draw = function(par) {

		par.strokeStyle = this.color;
		par.moveTo(this.x,this.y);
		par.lineTo(this.x2,this.y2);	
		par.stroke();	   
	};
	function Canvas(id) {

		this.add = function(figure) {

			var canvas = document.getElementById(id),
				ctx = canvas.getContext("2d");
			figure.draw(ctx);
		};
	};


	var line = new Line(25, 75, 275, 75, 'red'); // x1, y1, x2, y2, color
	var circle = new Circle(120, 100, 50, 'green'); // x, y, r, color
	var rect = new Rect(100, 30, 50, 100, 'blue'); // x, y, w, h, color
	var drawArea = new Canvas('canvasLine');
	drawArea.add(line);
	var drawArea = new Canvas('canvasCircle');
	drawArea.add(circle);
	var drawArea = new Canvas('canvasRect');
	drawArea.add(rect);