21
Июл
2021

Не отрисовываются цвета в <canvas>

Почему-то не отрисовываются цвета:

function Figure(x, y, color) {
  this.x = x;
  this.y = y;
  this.сolor = color;
};

function Line(x1, y1, x2, y2, color) {
  Figure.call(this, x1, y1, color);
  this.x2 = x2;
  this.y2 = y2;
  this.draw = function(ctx) {
    // let ctx = document.getElementById('c1').getContext('2d');
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    ctx.lineTo(this.x2, this.y2);
    ctx.strokeStyle = this.color;
    ctx.stroke();
  }
};

function Rect(x, y, width, height, color) {
  Figure.call(this, x, y, color);
  this.w = width;
  this.h = height;
  this.draw = function(ctx) {
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.w, this.h);
  }
};

function Circle(x, y, r, color) {
  Figure.call(this, x, y, color);
  this.rad = r;
  this.draw = function(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, true);
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};

var line = new Line(50, 50, 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

function Canvas() {
  let canvasField = document.getElementById('c1');
  this.ctx = canvasField.getContext('2d');
  this.add = function(...args) {
    for (let i = 0; i < args.length; i++) {
      let ctx = this.ctx;
      args[i].draw(this.ctx);
    }
  }
}

let drawArea = new Canvas();
drawArea.add(line, circle, rect);
#c1 {
  width: 400px;
  height: 200px;
  border: 3px solid black;
  margin: 5px;
  background-image: url(../images/setka.png);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <link rel="stylesheet" href="css/all.css">
</head>

<body>
  <сanvas id="c1" height="200px" width="400px">ooo</сanvas>
  <script src="JS/script.js"></script>
</body>

</html>

Вот что я получаю:

1

А хотелось бы цветное! Что я делаю не так???

Источник: https://ru.stackoverflow.com/questions/1307258/%D0%9D%D0%B5-%D0%BE%D1%82%D1%80%D0%B8%D1%81%D0%BE%D0%B2%D1%8B%D0%B2%D0%B0%D1%8E%D1%82%D1%81%D1%8F-%D1%86%D0%B2%D0%B5%D1%82%D0%B0-%D0%B2-canvas

Тебе может это понравится...

Добавить комментарий