Category: canvas

17
Янв
2021

Функция resultPath некорректно находит ближайшую точку

Привожу код целиком, чтобы была понятна ситуация – генерируем рандомные точки на канве, ищем кратчайший маршрут от первой до последней точки. В начале описаны функции по нахождению кратчайшего расстояния между любыми точками(тренировался)….

12
Янв
2021

Как соединить два div-a линией в приложении с drag & drop

У меня есть приложение, написанное с помощью React-dnd, окно, в котором я могу свободно перемещать блоки. Проблема в том, что нужно соединять эти блоки линиями (стрелочками). Находил много вариантов в интернете, но у меня линии должен дела…

09
Янв
2021

проблема с написанием игры пинг-понг на чистом js. И столкнулся с проблемой физики мяча. Мяч должен отбиваться от ракеток и рикошетить по стенкам

#canvas {
display: block;
margin: 0px;
text-align: center;
}

body {
background-color: brown;
}
<!DOCTYPE html>
<html>
<meta charset=”utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”style.css”&g…

06
Янв
2021

Как в анимацию c canvas включить изображение?

Есть canvas с анимацией отскока от стены мячика.
Как сделать так, чтобы вместо мячика гулял по экрану дед мороз (img картинка), а при соударении об стенку сменялся на елку на голубом фоне и зациклено при новом столкновении со стенкой снова…

17
Дек
2020

canvas smile/sad face

помогите с определением координат x,y для анимации улыбки и грусти с помощью canvas и requestAnimationFrame
нужно анимировать рот чтобы он из улыбки превращался в грусть

window.onload = () => {
const c = document.getElementById(‘c…

15
Дек
2020

Как в canvas строку разделить и перенести на новую, если количество символов в строке больше N?

Алгоритм такой, подсчитать количество символов в строке, если количество символов в строке больше N.
То найти ближайшее слово, которое уже не влазит по количеству символов и начиная с этого слова перенести оставшиеся слова на новую строку….

13
Дек
2020

Почему не работает html2canvas со свойством -webkit-box?

У меня есть редактор некоего баннера, который по кнопке ниже обрабатывается через html2canvas, и выдаётся в виде картинки, которую можно скачать.
В баннере есть текст, который должен занимать не более 3 строчек, что я делаю через свойство …

11
Дек
2020

Наложить картинку с transform на canvas

Есть canvas. Есть картинка с абсолютной позицией, которую можно перемещать поверх canvas. Можно ее "отпечатать" на canvas, просто вызвав drawImage с отступами картинки. Если у картинки есть свойство transform rotateY (причем, су…

11
Дек
2020

Подскажите легковесную библиотеку для работы с картинками в canvas

прошу подсказать легковесную и простую библиотеку JS для работы с Canvas.
Чтобы можно было в canvas добавлять свои картинки любого размера и текст, не теряя качество картинки такого плана.
Пример, как должна примерно выглядеть картинка

30
Ноя
2020

Принцип работы figma. Как сделать мини аналог?

Есть желание попрактиковаться и попробовать написать свою очень простую figma ( Добавление на канвас прямоугольников, изменение размеров, удаление приближение камеры и тд). Что посоветуете изучить.
Опыт работы в react, vue, nuxt – можно их…

24
Ноя
2020

Как сделать хорошую разметку в коде, чтобы картинки не разъезжались на разных устройствах?

Делаю меню в мобильной игре (меню в виде картинок)(ниже представлен один из элементов)
menu_n = BitmapFactory.decodeResource(getResources(), R.drawable.m);
menu_nBitmap = Bitmap.createScaledBitmap(menu_n,350, 100, false);

canvas.drawBi…

12
Ноя
2020

Беда с координатами в canvas на Js

Есть набросок логики платформера. Пока работаю над осью y. Беда в том, что при соприкосновении с препятствием, скорость игрока приравнивается к нулю через метод window.requestAnimationFrame(), и слушатель keydown на клавишу "Вверх&quo…

11
Ноя
2020

Python Pyglet тормозит анимация. Медленно отрисовываются объекты на экране

Уже не однократно сталкиваюсь с проблемой торможения анимации при отрисовки различных объектов на Python. Проблема особенно обостряется, когда количество отрисовываемых объектов увеличивается. Я бы не сказал, что объектов прям слишком мног…

10
Ноя
2020

Как нарисовать эту фигуру и учетом динамичности? [закрыт]

Здраствуйте я программист новичок как мне нарисовать эту фигуру можете подсказать надо сделать так чтобы кард и часть круга были связаны и код должен быть пригоден для динамической связи, пагинация будет так чтобы максимум шесть элементов…

07
Ноя
2020

Как нацепить эвент на объект класса

Решил сделать объект по шаблону класса, на который можно было бы тыкать(отслеживать евент), но у меня не хватает знаний в js. В чем заключается моя проблема в данном скрипте?
Листенер просто не видит картинку, по которой нужно нажать.
clas…

30
Окт
2020

Проблема с совмещением ребер при выводе наклонных линий, сглаживание в Canvas JS

Вывожу на <canvas> линии, соединенные в треугольники, полученные в результате триангуляции Делоне. При этом возникают артефакты на стыках ребер, причем они "просвечиваются" – при выводе нового рисунка поверх в ребрах между …

30
Окт
2020

JS. Как отменить функцию setInterval()

JS. Как остановить функцию setInterval(), которую ранее уже запускали (проблема в том что они накладываются друг на друга)
Необходимо чтобы спрайт двигался налево или направо (без остановки), когда происходит клик по краю canvas
Вот часть …

29
Окт
2020

Запуск js-скрипта

Всем привет! Каким образом можно "запустить" js-скрипт (содержащий canvas) при определенном событии (например, клик на кнопку)? И так же его завершить.
Я пытался все это дело реализовать с помощью insertAdjacentHTML, который бы д…

27
Окт
2020

Столкновение с объектами

Какая хорошая практика обнаружения столкновения 2 объектов(стеной). Да не просто обнаружение, а именно дальнейшее смещение, чтобы объекты не входили друг в друга. То есть, чтобы при столкновении они упирались друг в друга, но не входили.
К…