Форум

JohnD_ · #1 (**permalink**) 03.03.2018, 18:27

Всем привет)
Я новичек в JS, знаю основы, понимаю основы ООП(вроде бы), есть небольшой опыт в вебе.
Итак, вопрос
Я создаю объект, пусть будет Cat. Одно из свойств - изображение этого кота. Как отрисовать его(объект) в canvas?

var canvas = document.querySelector('.canvas');
var ctx = canvas.getContext('2d');

var cat = new Cat('Max');

function Cat(name){
	this.name = name;
	this.img = 'cat.jpg';
}

рони · #2 (**permalink**) 03.03.2018, 19:48

JohnD_,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #3 (**permalink**) 03.03.2018, 19:48

JohnD_,

<!DOCTYPE html>

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


</head>

<body>
<canvas class="canvas" width="400" height="200"></canvas>
 <script>
var canvas = document.querySelector(".canvas");
var ctx = canvas.getContext("2d");
function Cat(name, src) {
  this.name = name;
  this.img = new Image;
  this.img.src = src || "cat.jpg";
}
Cat.prototype.drawing = function() {
  var x = (canvas.width - 100) * Math.random() | 0;
  var y = (canvas.height - 80) * Math.random() | 0;
  ctx.drawImage(this.img, x, y, 100, 80);
};
var cat = new Cat("Max", "http://kinoclub.to/wp-content/uploads/2016/04/y_1483200759_47567.jpg");
cat.drawing();
  </script>
</body>
</html>

JohnD_ · #4 (**permalink**) 03.03.2018, 20:11

Спасибо
А можно не использовать Cat.prototype.drawing? Объявить метод в классе как

this.draw = function(){
  	ctx.drawImage(this.img, 10, 10);
  }

этот код работает, но не буду ли проблемы в будущем?

рони · #5 (**permalink**) 03.03.2018, 20:16

JohnD_,
Cat.prototype.drawing - одна функция для всех обьектов,
this.draw у каждого обьекта своя функция - 1000 обьектов 1000 функций, выбор за вами.

JohnD_ · #6 (**permalink**) 03.03.2018, 20:23

то есть для каждого класса, который я захочу отрисовать, мне придется прописывать такой код?

рони · #7 (**permalink**) 03.03.2018, 20:45

JohnD_,
класс-через-прототип

JohnD_ · #8 (**permalink**) 03.03.2018, 20:46

понял, спасибо

Форум

Справочник

Discord чат

Курсы javascript