«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > Почему мое изображение не отображается на холсте HTML?

Почему мое изображение не отображается на холсте HTML?

Опубликовано 8 ноября 2024 г.
Просматривать:621

Why Isn\'t My Image Appearing on the HTML Canvas?

Как добавить изображение на холст

В HTML-холсте вы можете улучшить свои творения, включив изображения. Однако столкновение с трудностями при попытке сделать это может привести к разочарованию. Цель этой статьи — помочь вам пройти весь процесс, обсудить распространенную проблему и предложить решение.

Проблема: Несмотря на наличие существующего источника изображения и отсутствие ошибок JavaScript, изображение не отображается на холст.

Решение: Крайне важно убедиться, что изображение полностью загружено, прежде чем пытаться нарисовать его на холсте. Измените свой код, включив в изображение прослушиватель событий загрузки, как показано ниже:

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base() {
  base_image = new Image();
  base_image.src = 'img/base.png';
  
  base_image.onload = function() {
    context.drawImage(base_image, 100, 100);
  };
}

Благодаря этой простой настройке ваше изображение теперь будет успешно отображаться на холсте после загрузки, что позволит вам улучшить свои проекты визуальными элементами.

Последний учебник Более>

Изучайте китайский

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3