Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Canvas функции и JQ (https://javascript.ru/forum/misc/69926-canvas-funkcii-i-jq.html)

Tanya51 27.07.2017 19:57

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.
Помогите разобраться пожалуйста

Rise 27.07.2017 21:31

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) {
        // ...
    }
}

рони 27.07.2017 21:39

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>

рони 27.07.2017 21:42

Rise,
:thanks:

Tanya51 29.07.2017 12:56

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

    });
}


обьясните пожалуйста)

Rise 29.07.2017 14:41

Tanya51,
https://learn.javascript.ru/prototypes


Часовой пояс GMT +3, время: 01:35.