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. Помогите разобраться пожалуйста |
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>
|
Rise,
:thanks: |
все понятно,кроме этой части
Canvas.prototype.add = function(){
var ctx = this._ctx;
[].forEach.call(arguments, function(el) {
el.draw(ctx);
});
}
обьясните пожалуйста) |
| Часовой пояс GMT +3, время: 21:01. |