Не получается отобразить объект
Добрый день! Делаю объект так:
//объект меню
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); Он появляется, но в левом верхнем углу... А мне нужно в указанных значениях. Что неправильно? Спасибо. |
Цитата:
ctx.drawImage(img1, x, y,30,30); |
Не получается. так вообще не выводится.
|
Jimy,
макет сделайте Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Вот такой простой код
<!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);
|
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>
|
Хм.. Получилось.. А скажите, почему Вы используете x,y, вместо this.x, this.y в ctx.drawImage(img1, x, y,30,30);?
|
Цитата:
если нужен this.y
img1.onload = function() {
ctx.drawImage(img1, this.x, this.y,30,30);
}.bind(this);
|
Спасибо большое! А не подскажите еще вдогонку, как менять курсор при прохождении над этим объектом? Пробовал так:
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() Но не работает... |
Jimy,
вычислять в c.onmousemove находится ли курсор в необходимых координатах. медитировать здесь https://javascript.ru/forum/showthre...956#post517919 |
| Часовой пояс GMT +3, время: 12:54. |