Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как поместить символ в точку с заданными координатами. (https://javascript.ru/forum/dom-window/64379-kak-pomestit-simvol-v-tochku-s-zadannymi-koordinatami.html)

DlinniyZmey 07.08.2016 06:12

Как поместить символ в точку с заданными координатами.
 
Дико извиняюсь за наивный вопрос, просто никак не могу решить эту элементарную задачу.
Дело в том, что лет 20 назад, в школе ради допоонителтной пятерки за 20 минут написал на Бейсике игру "Змейка". Очень хочу сделать сейчас тоже самое на java script.
Массивы, циклы, функции, взаимодействие с клавиатурой... Всё есть. Всё как в Бейсике, с небольшими отличиями. А вот как мне вывести символ или картинку в точку с заданными координатами? А затем удалить его или затереть пробелами? То есть нужен аналог оператора
print "@" at x, y - в Бейсике.
Прочитал несколько курсов java script для чайников. Alert и document.write не подходят...
Прочитал половину полноценного курса. Дошел до ОПП... Понял, что иду не туда.

Хотел найти ответ в html. Но там только таблицы да бегающих в разные стороны надписи разных цветов и стилей.

Я понимаю, что слишком мало ещё знаю, но мне кажется что эта задача должна решаться как то очень просто. Без глубоких познаний в HTML5 и CSS3.
Направьте пожалуйста в нужную сторону.

Strongman 07.08.2016 06:31

Текст
Методы и свойства для работы с текстом:
cnv.fillText(text,x,y [, maxw]) — выводит текст в указанные координаты, с максимальной шириной maxw;
cnv.strokeText(text, x, y [, maxw]) — выводит контур текста в указанные координаты, с максимальной шириной maxw;
cnv.measureText(text) — возвращает объект TextMetrics, который определяет примерную ширину указанного текста. (TextMetrics.width).
cnv.font — css строка параметров шрифта (Например: italic 30px sans-serif);
cnv.textAlign — задаёт выравнивание текста («start», «end», «left», «right», «center»);
cnv.textBaseline — определение базовой линии («top», «hanging», «middle», «alphabetic», «ideographic», «bottom»);
Источник: http://webonrails.ru/post/102724754472964822/.

vadim5june 07.08.2016 08:39

Можно без каваса, с помощью абсолютного позиционирования
<span style="position:absolute;top:100px;left:50px;">@</span>

DlinniyZmey 07.08.2016 09:56

Спасибо! Буду экспериментировать.

Strongman 07.08.2016 11:24

Ну а как без канвы, змейку же ведь на канве нужно рисовать. Без канвы никак.

warren buffet 08.08.2016 11:42

Да не нужен тут канвас, браузер с десяток тыщ дивов тебе отрисует по абсолютным в один миг.


Часовой пояс GMT +3, время: 01:45.