Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.07.2017, 19:57
Аспирант
Отправить личное сообщение для Tanya51 Посмотреть профиль Найти все сообщения от Tanya51
 
Регистрация: 09.07.2017
Сообщений: 49

Canvas функции и JQ
есть вот такая задача:

Создайте базовый класс 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. В этом классе есть метод add, который и отображает созданные вами фигуры на странице. Обратите внимание, добавлять фигуры на канвас можно как по отдельности, так и списком.

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

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



Мой JS
'use strict'
debugger;

function Figure(x1,y1,x2,y2,color){
	this._x1=x1;
	this._y1=y1;
	this._x2=x2;
	this._y2=y2;
	this._color=color;
}

function Line(x1,y1,x2,y2,color){
	Figure.apply(this,arguments);
	
	function draw (x1,y1,x2,y2,color){
		ctx.beginPath();
	ctx.moveTo(x1, y1);
	ctx.lineTo(x2, y2);
	ctx.strokeStyle = color;
	ctx.stroke();
	}
}

var line = new Line(50, 250, 200, 200, 'red');

function Canvas(){

	var c=document.getElementById("canvasID");
	var ctx=c.getContext("2d");
	c.height = 2000;
	c.width  = 2000;
	
	Canvas.prototype.add = function(){
		return $(arguments).appendTo('#canvasID')
	}
	
	
};
var drawArea = new Canvas('canvasID');
	drawArea.add(line);



у меня не получается сделать так,чтоб моя line рисовалась в теге Canvas.
Помогите разобраться пожалуйста
Ответить с цитированием
  #2 (permalink)  
Старый 27.07.2017, 21:31
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,098

Tanya51,
Canvas это изображение, для jQuery это как <img>.
class Canvas {
    constructor(id) {
        this.ctx = document.getElementById(id).getContext('2d');
    }
    add(...figures) {
        for (let figure of figures) {
            figure.draw(this.ctx);
        }
    }
}

class Figure {
    constructor(x, y, color) {
        // ...
    }
}

class Circle extends Figure {
    constructor(x, y, r, color) {
        super(x, y, color);
        this.r = r;
    }
    draw(ctx) {
        // ...
    }
}
Ответить с цитированием
  #3 (permalink)  
Старый 27.07.2017, 21:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,900

Tanya51,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<canvas id="canvasID"></canvas>
<script>
'use strict'


function Figure(x1,y1,color){
  this._x1=x1;
  this._y1=y1;
  this._color=color;
}

function Line(x1,y1,x2,y2,color){
  Figure.apply(this,[x1,y1,color]);
  this._x2=x2;
  this._y2=y2;
}
Line.prototype.draw = function(ctx){
  ctx.beginPath();
  ctx.moveTo(this._x1, this._y1);
  ctx.lineTo(this._x2, this._y2);
  ctx.strokeStyle = this._color;
  ctx.stroke();
  }
function Canvas(sel){
  var c=document.querySelector(sel)
  this._ctx = c.getContext("2d");
  c.height = 300;
  c.width  = 300;
};
Canvas.prototype.add = function(){
    var ctx = this._ctx;
    [].forEach.call(arguments, function(el) {
           el.draw(ctx);

    });
}
var drawArea = new Canvas('#canvasID');
var line = new Line(50, 50, 200, 200, 'red');
var line2 = new Line(250, 50, 70, 200, '#00FF00');
drawArea.add(line,line2);

</script>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 27.07.2017, 21:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,900

Rise,
Ответить с цитированием
  #5 (permalink)  
Старый 29.07.2017, 12:56
Аспирант
Отправить личное сообщение для Tanya51 Посмотреть профиль Найти все сообщения от Tanya51
 
Регистрация: 09.07.2017
Сообщений: 49

все понятно,кроме этой части
Canvas.prototype.add = function(){
    var ctx = this._ctx;
    [].forEach.call(arguments, function(el) {
           el.draw(ctx);

    });
}


обьясните пожалуйста)
Ответить с цитированием
  #6 (permalink)  
Старый 29.07.2017, 14:41
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,098

Tanya51,
https://learn.javascript.ru/prototypes
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Передача результата функции, другой функции Aleksandr Chirkov Элементы интерфейса 3 24.06.2017 17:32
Подгрузка картинки на холсте в нутри функции.. Mike_Kharkov Общие вопросы Javascript 1 28.04.2013 03:22
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 11:55
Установить имя конструктора Андрей Параничев Общие вопросы Javascript 8 17.11.2011 08:09
arguments вызвавшей функции mister_maxim Общие вопросы Javascript 4 12.10.2010 15:21