Category: canvas

02
Дек
2021

Паззл на canvas js. как сделать ,чтобы один паззл не ложился поверх второго

Пишу игру паззл на canvas js. хотела бы сделать так, чтобы в левое поле ,если там уже есть картинка, не притягивалась вторая поверху. Подскажите, пожалуйста, как это исправить? Заранее большое спасибо! Рабочий пример: https://codepen.io/na…

01
Дек
2021

Как повлиять на элементы при :hover за холстом при рисовании следа мыши

У меня есть 8 столбцов flex-box, где при наведении курсора на них будут отображаться изображения. Я хочу оставлять следы при перемещении мыши по экрану, поэтому я использовал onmousemove, чтобы рисовать линии на холсте. Однако, когда я кла…

29
Ноя
2021

паззл на canvas js, как сделать, чтобы тянулась верхняя картинка [дубликат]

Пишу паззл на canvas js. Есть баг. если перетянуть одну картинку поверх другой, потом они тянутся вместе. Подкиньте, пожалуйста, идею, как это исправить??? Рабочий пример: https://codepen.io/natella-homza/pen/eYGOLGV?editors=1010
<body&…

28
Ноя
2021

паззл на canvas js, как сделать, чтобы тянулась только верхняя картинка

Пишу паззл на canvas js. Есть баг. если перетянуть одну картинку поверх другой, потом они тянутся вместе. Подкиньте, пожалуйста, идею, как это исправить??? Рабочий пример: https://codepen.io/natella-homza/pen/eYGOLGV?editors=1010
<body&…

26
Ноя
2021

Порекомендуйте курс или книгу по анимациям на js?

Очень интересует тема анимаций на js. А именно хочу узнать как строить математические формулы для построения разных фигур и придания им динамики. Есть книга, курс, ресурсы где бы это было показано на примерах с описанием. Можно на английск…

26
Ноя
2021

переписать код canvas js на ооп

Помогите, пожалуйста, переписать код на ООП. Пишу паззл. Код рабочий, но теперь его нужно переписать на ООП. Попыталась, не получилось. Опыта еще очень мало, только учусь.
function draw() {
ctx.clearRect(0, 0, width, height);
drawPlayingFi…

23
Ноя
2021

Как оптимизировать эту анимацию, чтобы она меньше загружала компьютер?

Эта анимация, основанная на ответе участника
Вася Воронцов, очень сильно загружает компьютер. Я делаю эту анимацию на холсте. Анимация очень сильно загружает процессор. Здесь свет следует за курсором и оставляет следы. Анимация работает п…

20
Ноя
2021

Библиотека для нарезки изображении JS

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

20
Ноя
2021

Библиотека для нарезки изображении JS

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

19
Ноя
2021

Canvas как сделать ,чтобы выбранный элемент в массиве прорисовывался последним и убрать анимацию мелькания

Разрабатываю паззл на js. Никак не могу понять, как сделать так, что элемент, который перетягивается перересовывался над другими ,и как сделать плавную анимацию. Исходник
`<!DOCTYPE html>
<html>

<head>
<meta charset=&…

19
Ноя
2021

Canvas как сделать ,чтобы выбранный элемент в массиве прорисовывался последним и убрать анимацию мелькания

Разрабатываю паззл на js. Никак не могу понять, как сделать так, что элемент, который перетягивается перересовывался над другими ,и как сделать плавную анимацию. Исходник
`<!DOCTYPE html>
<html>

<head>
<meta charset=&…

19
Ноя
2021

Canvas как сделать ,чтобы выбранный элемент в массиве прорисовывался последним и убрать анимацию мелькания

Разрабатываю паззл на js. Никак не могу понять, как сделать так, что элемент, который перетягивается перересовывался над другими ,и как сделать плавную анимацию. Исходник
`<!DOCTYPE html>
<html>

<head>
<meta charset=&…

19
Ноя
2021

Canvas как сделать ,чтобы выбранный элемент в массиве прорисовывался последним и убрать анимацию мелькания

Разрабатываю паззл на js. Никак не могу понять, как сделать так, что элемент, который перетягивается перересовывался над другими ,и как сделать плавную анимацию. Исходник
`<!DOCTYPE html>
<html>

<head>
<meta charset=&…

16
Ноя
2021

chartjs Как заставить bubble двигаться по оси Y

Формирую график с двумя линиями и нахожу их точку пересечения. Мне нужен тултип у этой точки, для этого я создаю bubble график, по оси Y он встает на нужное место, по оси X он прилипает к 0. Как сделать чтобы его можно было двигать по обеи…

16
Ноя
2021

chartjs Как заставить bubble двигаться по оси Y

Формирую график с двумя линиями и нахожу их точку пересечения. Мне нужен тултип у этой точки, для этого я создаю bubble график, по оси Y он встает на нужное место, по оси X он прилипает к 0. Как сделать чтобы его можно было двигать по обеи…

09
Ноя
2021

Как сделать анимацию кулачкового механизма?

У меня есть гифка работы кулачкового механизма:

Эта иллюстрация показывает, что при равномерном вращении вала с насаженным на него кулачком, толкатель получает неравномерные возвратно-поступательные движения толкателя, который скользит по…

02
Ноя
2021

Реализация логики срабатывания двух условий в анимации

Вопрос инициирован вопросом и ответом на него, в котором реализована логика взаимодействия пешеходов с сигналами светофора:
Пешеходы:

стоят у зебры, когда: горит желтый или красный цвет
переходят дорогу только на зелёный цвет светофора

А…

31
Окт
2021

Обработчик событий в Canvas

Есть канвас с имитацией падающих блоков (реализовано координатами с отрисовкой через .fillRect(), с дальнейшим изменением Y ). Хочу повесить обработчик на клик по блоку, скажем чтобы блок исчезал. Как мне это реализовать? Или сама идея вза…

30
Окт
2021

Сильная нагрузка canvas js, проседают fps

Накидал себе geometry dash на js, всё работало, но когда начал увеличивать карту, с стабильных 60 фпс всё начало скакать в районе 5-20: vsecoder.github.io/geometry/.

Я думаю что это связанно с частой перерисовкой большой карты, но как
мо…

30
Сен
2021

Необходимо нарисовать четырёхугольник по указанным размерам, разделённый горизонтальными и вертикальными линиями

Пишу приложение на android.
Пользователь выбирает, в выпадающем списке, размер из нескольких доступных, например: 160х160; 630х400; 2500х1600 и т.д.
выбрав один из этих вариантов должен "нарисоваться" четырёхугольник.
Но каждый ч…