Изображение в canvas
Всем привет)
Я новичек в 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';
}
|
JohnD_,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
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>
|
Спасибо
А можно не использовать Cat.prototype.drawing? Объявить метод в классе как
this.draw = function(){
ctx.drawImage(this.img, 10, 10);
}
этот код работает, но не буду ли проблемы в будущем? |
JohnD_,
Cat.prototype.drawing - одна функция для всех обьектов, this.draw у каждого обьекта своя функция - 1000 обьектов 1000 функций, выбор за вами. |
то есть для каждого класса, который я захочу отрисовать, мне придется прописывать такой код?
|
JohnD_,
класс-через-прототип |
понял, спасибо
|
| Часовой пояс GMT +3, время: 04:18. |