Форум
Справочник
| Страница 1 из 2 | 1 | 2 | > |
 | Опции темы | Искать в теме | |
Всем доброго времени суток! Есть код:
Почему не работает? Пробовал всяко-разно.
Ну во первых код может не работать если рисовать раньше чем загрузится картинка, во вторых не вижу где вы объявили переменную «Ugo».
А что пишет консоль?
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования — читайте http://javascript.ru/formatting.
А что пишет консоль?
.onload = function() пробовал, тоже не работает, Ugo — это id картинки, я попробовал в drawImage ставить id и все работает. Консолью не пользуюсь, алерта хватает.
в общем так работает:
ctx.drawImage(Ugo, 100, 100 );
а так нет
ctx.drawImage(Ugo, ArrCenter[i], ArrCenter[i+1] );
Алерт вам ошибок не скажет, а конслоль скажет.
Короче вот вам пример, дальше сами.
for (i=0; i ctx.drawImage(Ugo, ArrCenter[i], ArrCenter[i+1] );
А почему не так:
Короче вот вам пример, дальше сами.
Консолью не умею пользоваться, разбираться нет времени, алерта пока хватает, я и так знаю что дело в drawImage, а именно: в попытке в качестве аргумента использовать элемент массива.
нужно именно с » i «, так как массив может быть очень большим:
ArrCenter = Array(100,100,200,200,300,300,400,400,500,500,501, 501 . );
и в ручную не реально все прописать.
попробовал как вы пишите:
var ArrCenter = [100,100]; — не помогло
Источник
Ctx drawimage не работает
Всем доброго времени суток! Есть код:
Почему не работает? Пробовал всяко-разно.
Ну во первых код может не работать если рисовать раньше чем загрузится картинка, во вторых не вижу где вы объявили переменную «Ugo».
А что пишет консоль?
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования — читайте http://javascript.ru/formatting.
Ну во первых код может не работать если рисовать раньше чем загрузится картинка, во вторых не вижу где вы объявили переменную «Ugo».
А что пишет консоль?
.onload = function() пробовал, тоже не работает, Ugo — это id картинки, я попробовал в drawImage ставить id и все работает. Консолью не пользуюсь, алерта хватает.
в общем так работает:
ctx.drawImage(Ugo, 100, 100 );
а так нет
ctx.drawImage(Ugo, ArrCenter[i], ArrCenter[i+1] );
Алерт вам ошибок не скажет, а конслоль скажет.
Короче вот вам пример, дальше сами.
| ArrCenter = Array(100,100); |
for (i=0; i ctx.drawImage(Ugo, ArrCenter[i], ArrCenter[i+1] );
А почему не так:
Алерт вам ошибок не скажет, а конслоль скажет.
Короче вот вам пример, дальше сами.
Консолью не умею пользоваться, разбираться нет времени, алерта пока хватает, я и так знаю что дело в drawImage, а именно: в попытке в качестве аргумента использовать элемент массива.
нужно именно с » i «, так как массив может быть очень большим:
ArrCenter = Array(100,100,200,200,300,300,400,400,500,500,501, 501 . );
и в ручную не реально все прописать.
попробовал как вы пишите:
var ArrCenter = [100,100]; — не помогло
Источник
Javascript метод drawImage()
Метод drawImage() рисует изображение, содержимое другого элемента или видео.
Также, метод drawImage() может нарисовать часть изображения и/или увеличить/уменьшить размер изображения.
Внимание: Нельзя вызывать метод drawImage() прежде, чем изображение будет загружено. Чтобы убедиться, что изображение было загружено, вызов метода drawImage() можно поместить внутри события window.onload() или document.getElementById(«imageID»).onload.
JavaScript синтаксис
Вывод изображения в заданной позиции на холсте:
| JavaScript синтаксис: | context.drawImage(img, x, y); |
Вывод изображения в заданной позиции на холсте и определение его ширины и высоты:
| JavaScript синтаксис: | context.drawImage(img, x, y, width, height); |
Обрезание изображения и вывод обрезанной части в заданную позицию:
| JavaScript синтаксис: | context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height); |
Значения параметров
| Параметр | Описание |
|---|---|
| img | Определяет используемое изображение, видео или элемент |
| sx | Необязательный параметр. Координата X начальной точки обрезки |
| sy | Необязательный параметр. Координата Y начальной точки обрезки |
| swidth | Необязательный параметр. Ширина обрезанного изображения |
| sheight | Необязательный параметр. Высота обрезанного изображения |
| x | Координата X на холсте, куда будет помещено изображение |
| y | Координата Y на холсте, куда будет помещено изображение |
| width | Необязательный параметр. Применяемая ширина изображения (можно растянуть или сжать изображение) |
| height | Необязательный параметр. Применяемая высота изображения (можно растянуть или сжать изображение) |
Пример использования
Изображение для примера:
Пример №1
Нарисовать изображение на холсте:
Ваш браузер не поддерживает HTML5 тег canvas.
Пример №2
Поместим изображение в заданную позицию на холсте и определим его ширину и высоту:
Ваш браузер не поддерживает HTML5 тег canvas.
Пример №3
Обрежем изображение и поместим обрезанную часть в заданную позицию на холсте:
Ваш браузер не поддерживает HTML5 тег canvas.
Пример №4
Используемое видео (нажмите Play, чтобы начать демонстрацию):
Элемент canvas:
Ваш браузер не поддерживает HTML5 тег canvas.
JavaScript (код рисует текущий кадр видео каждые 20 миллисекунд):
Источник
Почему drawImage из localStorage не работает?
Используя TypeScript, но я не думаю, что это важно.
StackOverflow необходим новый тег: localstorage
Если вы скопируете тег img на холст через .drawImage, он будет работать нормально. Если вы сохраните и загрузите его из localStorage, вы получите:
DrawImage: аргумент 1 не может быть преобразован ни в один из: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.
4 ответа
Нашел рабочее решение, по крайней мере, в JSFiddle: https://jsfiddle.net/Dustin_00/nb1j3fw0/70 /
Решение @ Rojo тоже работает. Но ни одна из них не работает в моем приложении .NET Core — просто пустое изображение.
Вместо элемента img html вы должны хранить в localStorage только его атрибут src . Затем вам просто нужно создать изображение, установив его src в значение, которое хранится в localStorage, и после загрузки нарисуйте его на canvas . Вот так:
LocalStorage.setItem принимает только строки, поэтому все, что не является строкой, будет .toString() запущено на нем перед сохранением, проверьте MDN localStorage.setItem.
Думали ли вы о том, чтобы сохранить img src в локальном хранилище и сделать что-то подобное, чтобы отобразить его https://stackoverflow.com/a/4776378/ 12523447
Если вы хотите сохранить весь элемент в localStorage , вы должны использовать imgSrc.outerHTML
Затем получите элемент особым образом: (DOMParser MDN) и SO answer
И подождите, пока загрузится изображение:
И по какой-то причине мне нужно добавить изображение в , чтобы оно работало. Если это произойдет и с вами, вы можете сразу удалить изображение (это может быть JSFiddle):
Источник
HTML5 CANVAS шаг за шагом: Изображения
CANVAS шаг за шагом:
- Основы
- Изображения
- Понг
- Пятнашки
Продолжение статьи про рисование на холсте, в которой мы научимся использовать изображения. Естественно рисовать на холсте примитивами очень не удобно и требует определённых трудозатрат, и результат иногода явно хромает качеством. Поэтому естественно в canvas api предусмотрено взаимодействие с изображениями. Добавление изображения условно можно разделить на два шага: создание JavaScript объекта Image, а второй и заключительный шаг это отрисовка изображения на холсте при помощи функции drawImage. Рассмотрим оба шага подробнее.
Создание нового графического объекта:
Кстати в качестве источника изображения, можно указать вот такую строку в которой изображение и описанно:
1. drawImage
Теперь мы перейдём к рисованию изображения на холсте. Для этого существует функция drawImage.
Стоит отметить что загрузка изображения происходит сразу после присвоения объекту источника изображения, и если оно не загрузится полностью к моменту вызова функции отрисовки, то оно попросту не будет нарисовано на холсте. Для избежания этой ситуации используется такая конструкция:
Вот мы наверное и дошли до момента когда можно рассмотреть элементарный пример:
Ссылка на фидл с примерами для этой стать.
2. Тянем-потянем
Но если бы всё ограничивалось простым рисованием изображением, то отдельную статью можно было бы не писать, а ограничиться подпунктом «Изображения» в предыдущем посте. Итак теперь мы попытаемся масштабировать изображение и для этого существует ещё один способ вызова функции drawImage:
Возьмём предыдущий пример и внесём в drawImage некоторые изменения:
Ссылка на фидл с примерами для этой стать.
3. Рисуем фрагмент изображения
Третий вызов drawImage с восемью параметрами, выглядит приблизительно так:
Возьмём всё тот же пример и подкорректируем функцию drawImage в третий раз:
Ссылка на фидл с примерами для этой стать.
4. Задача
Теперь осталось закрепить всё пройденное на практическом примере. Как и в том примере это будет небольшая карта, только не из какой-то существовавшей игры, а придуманной нами. Для того что бы он нормально работал нам необходимо будет создать в любом графическом редакторе изображение составленное из фрагментов которые нам будут нужны что бы нарисовать дорожку, домик и полянку. Вообще фрагменты карты называются тайлами, а файл в котором они все собраны в одно изображение называется тайлсетом. Вот это изображение я нарисовал собственноручно в программе Pinta под Ubuntu. 
Итак, размерность будет 8 на 8 квадратных блоков шириной 32 пиксела. На карте нам необходимо будет изобразить домик и дорожку. Элементы домика нарисованы ручками, можно сказать каждый кирпичик. Траву и песок делалось путём заливки облости соответствующим цветом и добавки шума. Всё конечно представленно очень примитивно, но показательно.
Рассмотрим с пинцетом такой кусок кода как var map = [[
И форэкзампл:
Источник
