Показать сообщение отдельно
  #3 (permalink)  
Старый 27.07.2017, 22:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,322

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>
Ответить с цитированием