27.01.2020, 06:17
|
|
Аспирант
|
|
Регистрация: 21.03.2019
Сообщений: 64
|
|
|
Не получается отобразить объект
Добрый день! Делаю объект так:
//объект меню
var obMenu=function(x,y){
this.x=x;
this.y=y;
var img1 = new Image();
img1.src = 'menu.png';
img1.onload = function() {
ctx.drawImage(img1, this.x, this.y,30,30);
};
};
А потом пытаюсь вызвать:
var menu=new obMenu(700,10);
Он появляется, но в левом верхнем углу... А мне нужно в указанных значениях. Что неправильно?
Спасибо. |
|
27.01.2020, 07:45
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
|
Сообщение от Jimy
|
ctx.drawImage(img1, this.x, this.y,30,30);
|
Пробуй так
ctx.drawImage(img1, x, y,30,30);
|
|
27.01.2020, 08:58
|
|
Аспирант
|
|
Регистрация: 21.03.2019
Сообщений: 64
|
|
|
Не получается. так вообще не выводится.
|
|
27.01.2020, 09:44
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Jimy,
макет сделайте
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
27.01.2020, 10:52
|
|
Аспирант
|
|
Регистрация: 21.03.2019
Сообщений: 64
|
|
Вот такой простой код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Проба</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script src="level1.js"></script>
</body>
</head>
</html>
А вот хочу вывести изображение в заданный координатах (именно чтобы был мой объект) level1.js
var c=document.getElementById('canvas');
var ctx=c.getContext('2d');
var obMenu=function(x,y){
this.x=x;
this.y=y;
var img1 = new Image();
img1.src = 'menu.png';
img1.onload = function() {
ctx.drawImage(img1, this.x, this.y,30,30);
};
};
var menu=new obMenu(700,10);
|
|
27.01.2020, 11:40
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Jimy,
что не так?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Проба</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
canvas{
border: 1px solid hsla(240, 100%, 50%, 1)
}
</style>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>var c=document.getElementById('canvas');
var ctx=c.getContext('2d');
var obMenu=function(x,y){
this.x=x;
this.y=y;
var img1 = new Image();
img1.src = 'https://image.flaticon.com/icons/svg/2286/2286153.svg';
img1.onload = function() {
ctx.drawImage(img1, x, y,30,30);
};
};
var menu=new obMenu(700,10);
</script>
</body>
</head>
</html>
|
|
27.01.2020, 12:06
|
|
Аспирант
|
|
Регистрация: 21.03.2019
Сообщений: 64
|
|
|
Хм.. Получилось.. А скажите, почему Вы используете x,y, вместо this.x, this.y в ctx.drawImage(img1, x, y,30,30);?
|
|
27.01.2020, 12:12
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от Jimy
|
|
почему Вы используете x,y, вместо this.x, this.y
|
img1.onload = function() здесь this это картинка img1!!!
если нужен this.y
img1.onload = function() {
ctx.drawImage(img1, this.x, this.y,30,30);
}.bind(this);
|
|
27.01.2020, 12:17
|
|
Аспирант
|
|
Регистрация: 21.03.2019
Сообщений: 64
|
|
Спасибо большое! А не подскажите еще вдогонку, как менять курсор при прохождении над этим объектом? Пробовал так:
v
ar obMenu=function(x,y){
this.x=x;
this.y=y;
this.onmousemove=function(){c.style.cursor='pointer'};
var img1 = new Image();
img1.src = 'menu.png';
img1.onload = function() {
ctx.drawImage(img1, x, y,30,30);
};
};
А потом вызвать menu.onmousemove()
Но не работает... |
|
|
|
