Форум

wadim · #1 (**permalink**) 20.01.2014, 08:09

Здравствуйте, есть код

<html>

<img id= 'photo' src = 'точечный рисунок.jpg' />

<script>

canvas = document.getElementById("drawingCanvas");
context = canvas.getContext("2d");

var img = document.getElementById("photo");

context .drawImage(img, 0, 500);
</script>

</html>

но изображение выводится не с координатами 0,500, вообще на координаты не реагирует, запускаю на хосте. Подскажите где ошибка.

Яростный Меч · #2 (**permalink**) 20.01.2014, 11:49

Сообщение от wadim

Подскажите где ошибка.

к моменту выполнения скрипта картинка не успевает загрузиться.
выполняй действия в window.onload

wadim · #3 (**permalink**) 20.01.2014, 17:05

Спасибо.

wadim · #4 (**permalink**) 20.01.2014, 21:17

Еще есть вопросы. Переписал весь код и далее развил его:

код клиента:
<html>
<canvas id='example'>Обновите браузер</canvas>

<script>
a =[];
a[1]=20;

var example = document.getElementById("example"),
ctx = example.getContext('2d'),
pic = new Image();
pic.src = 'Ris.JPG';
pic.onload = function() { // Событие onLoad, загрузка

a.forEach(function(element, index) {
ctx.drawImage(pic, element, 100); // Рисуем изображение
});

}

</script>

</html>

Задача: написание сетевой игры. Данный код выводит изображение(юнит) по координатам массива "a[]". Нужно чтобы координаты юнита приходили с сервера и сервер был закрыт для пользователя(как закрыть?). Возможная реализация:

на сервере:
a2=[];
a2[1]=20;
далее передаем переменную a2[1] c сервера на клиент(как передать проще интересует меня, клиент на яваскрипте, думаю сервер тоже должен быть на нем, так мне удобно), после присваиваем переменной a[1] значение переменной a2[1]:
a[1]=a2[1]; - этот код исполняется на стороне клиента. Естественно убираем из клиента строку: a[1]=20;

Файл клиента и файл сервера лежат на одном хосте.

Форум

Справочник

Discord чат

Курсы javascript