Форум программистов, компьютерный форум, киберфорум
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.85/13: Рейтинг темы: голосов - 13, средняя оценка - 4.85
0 / 0 / 0
Регистрация: 13.02.2019
Сообщений: 29

Не отображается фон

21.07.2019, 11:24. Показов 2485. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброе утро. Пишу змейку на JS, добавил фон, а на странице в браузере его не видно. В чем проблема? Спасибо

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
 
const ground = new Image();
ground.src="img/ground.png";
 
 
const food = new Image();
ground.src="img/food.png";
 
let box = 32;
 
let score = 0;
 
function drawGame() {
  ctx.drawImage(ground, 0 , 0);
}
 
let game = setInterval(drawGame, 100);
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, intitial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Игра на JavaScript</title>
  <link rel="stylesheet" href="/css/master.css">
  </head>
  <body>
    <canvas id ="game" width ="852" height="480"> </canvas>
    <script src="js/game.js"></script>
 
 
  </body>
</html>
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
21.07.2019, 11:24
Ответы с готовыми решениями:

Не отображается фон при анимации
Всем привет! Буду очень благодарен, если поможете разобраться! Сначала опишу свою задумку для ясности, а потом суть проблемы. ...

Не отображается фон
Есть простейший код. На странице задано фоновое изображение. В визуальном редакторе оно отображается, а при дебаге в браузере не хочет. В...

Не отображается фон
Есть код css : } .actions { text-align: center; } .ai { background-image: url('./img/ai.jpg'); } .container {

1
108 / 102 / 35
Регистрация: 14.03.2014
Сообщений: 586
23.07.2019, 11:25
Лучший ответ Сообщение было отмечено Стас5486 как решение

Решение

ground.src="img/ground.png" и ground.src="img/food.png", у вас по этому пути точно есть картинка ? а то я указал путь к своей картинке и она появилась.

Т.е. там где у вас лежит фаил index.html, исходя из пути описанного выше должна быть папка - "img", а в ней файлы "ground.png" и "food.png"
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
23.07.2019, 11:25
Помогаю со студенческими работами здесь

Не отображается фон
Не отображается фон на всю область просмотра... да в принципе он вообще не отображается Картинку прилагаю. Код: &lt;!DOCTYPE HTML...

Не отображается фон
Помогите пожалуйста, у меня при просмотре страницы в браузере не отображается фон страницы если использую представление. P.S. страница с...

Не отображается фон в мобильном
Слелал сайтик со стилями css. У жены на телефоне его грузит, у мегя на точно таком же телефоне в ХРОМЕ не грузит фон. Но... во всех других...

Фон таблицы не отображается
всем привет. вот страница - http://93lab.ru/ под слайдером, где идут в ряд иконки - это таблица. у нее стоит свойство -...

Неправильно отображается фон
В мобильной версии сайта фон должен был обрезаться, но по факту на всех ссылках выглядит по разному, а где-то повторяется...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru