Вопросы с меткой [html5-canvas]

Руководство по использованию метки отсутствует.

Фильтрация
Сортировка
Метки
1 голос
0 ответов
37 показов

Текстуры и картинки в HTML canvas

Я пишу браузерную игру, где для отрисовки игроков (танчиков) использую графические примитивын: полигоны, круги, и.т.п. Я хочу делать танки не монотонно-зелёными или серыми, а также добавить камуфляж. ...
BRO_Fedka's user avatar
0 голосов
0 ответов
21 показ

Равномерно распределить в центре области случайное количество окружностей

нужно нарисовать в центре canvas случайное количество окружностей, причем расположить их вплотную, соприкасаясь краями друг с другом. Это нужно для схематичного вида сверху на букет цветов, только ...
Mr SkNilPler's user avatar
0 голосов
1 ответ
38 показов

Изменение размера Rect

Как реализовать изменение размера прямоугольника или квадрата пропорционально? Допустим потянув за поинтер который находится на нижнем левом угле. Имеются координаты поинтера X|Y Координаты мыши на ...
隼SAPSAN's user avatar
0 голосов
1 ответ
51 показ

как добавить появление картинки вместо красных квадратов?

function drawGame() { ctx.drawImage(ground, 0, 0); ctx.drawImage(foodImg, food.x, food.y); for(let i = 0; i < snake.length; i++) { ctx.fillStyle = i == 0 ? "green" : ...
simlekoder's user avatar
2 голоса
1 ответ
660 показов

Как сделать коллизию двух блоков на Canvas JavaScript с учетом стороны колизии

Делаю игру на JavaScript на Canvas, сделал передвижение персонажа и гравитацию, но никак не могу сделать правильную коллизию, такую, что она работала при слишком больших/маленьких размерах блока. ...
bourbaki's user avatar
  • 163
1 голос
0 ответов
79 показов

Как обеспечить минимальный радиус кубическим Безье?

Строится кривая, состоящая из множества кубических Безье, следующих друг за другом. Пробую обеспечить отсутствие крутых поворотов со сверхмалым радиусом, изломов. Для этого вычисляю угол, образующийся ...
Leonid's user avatar
  • 5,797
2 голоса
4 ответа
198 показов

Как оптимизировать или исправить анимацию волны?

Делаю примитивную анимацию волны. Но столкнулся с проблемой. Первая кривая Безье не согласуется с последующими, из-за этого пришлось спрятать этот участок за холстом. Как можно упростить анимацию, ...
Leonid's user avatar
  • 5,797
4 голоса
1 ответ
151 показ

Текст в canvas масштабируется рывками, как можно сделать эффект более плавным?

Есть canvas, на котором отрисован текст. Холст перерисовывается согласно requestAnimationFrame(), при этом в каждом кадре увеличивается масштаб. Проблема: текст отрисовывается каждый раз как будто в ...
Leonid's user avatar
  • 5,797
2 голоса
1 ответ
104 показа

Вычисление координат вершины кривой Безье;

имеется кривая безье построенная по 3 точкам. как определить реальные координаты высоты отрисованной кривой?! Использую CreateJS (EaselJS) функция Graphics.BezierCurveTo ( cp1x cp1y, cp2x, cp2y, x, y ...
隼SAPSAN's user avatar
0 голосов
1 ответ
59 показов

Здравствуйте, помогите пожалуйста, как привести в движение мячик по клику? [закрыт]

let ctx = canvas.getContext("2d"); let ballRadius = 30; let ball = new Path2D(); let x = canvas.width/2; let y = canvas.height-30; let dx = 0; let dy = 0; figures = [ball]; canvas.onclick = ...
Casque17's user avatar
0 голосов
0 ответов
67 показов

Как прервать линию при передаче координат мыши через сокет?

Сайт онлайн доска на которой рисуют несколько пользователей. По сокету передаются координаты мыши и при получении отображаются на стороне клиента, на канвасе. Но когда пользователь отпускает мышь, ...
Struj's user avatar
  • 101
0 голосов
1 ответ
162 показа

Анимация конфетти(canvas) с snap.js

Учу с нуля. Но ответа на данный вопрос не нашел Нашел единственно подходящую анимацию конфетти. Вставил ее в конец HTML, и теперь есть анимация при открытии страницы поверх моего snap.js: <script ...
Anton  Rabota's user avatar
1 голос
1 ответ
58 показов

Игрок неправильно передвигается

Я пишу онлайн игру по типу агарио. Код перемещения игрока я сделал таким: function sq(x) { return x*x; } var mX = playerMouse.x; // Координаты мышки по X var mY = playerMouse.y; // Координаты мышки ...
lksmnd's user avatar
  • 47
1 голос
1 ответ
182 показа

Canvas нанести текст на изображение, чтобы текст был частью изображения

Делаю игру papers, please в браузере. Сейчас реализовано: Есть стол, на нем документы, которые можно перетаскивать (пока перетаскиваю цветные прямоугольники) Есть данные документов (имя, фамилия, ...
Color kat's user avatar
  • 542
5 голосов
1 ответ
338 показов

Какие существуют стратегии при работе с Canvas?

С канвасом знаком поверхностно - при первом знакомстве столкнулся с таким гайдом в разрезе работы с vue.js: Controlling the HTML5 Canvas with Vue.js Вопросы: Позволяет ли такой способ работать со ...
Mikhail Krivosheev's user avatar
3 голоса
1 ответ
108 показов

Как сделать много анимаций в одном canvas?

Помогите пожалуйста разобраться с canvas'ом. Написал такой скрипт: const ctx = canv.getContext('2d'); const crossImg = new Image(); crossImg.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...
HTO HOT's user avatar
  • 1,302
0 голосов
1 ответ
188 показов

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

есть код var canvas = document.getElementById("myCanvas"), context = canvas.getContext("2d"); var img = new Image(); var imgT = new Image(); ...
John Frost's user avatar
0 голосов
1 ответ
111 показов

На чём лучше всего делать свой интерактивный web видео-плеер с возможностью выбора сценария продолжения?

Ребята! Хочу сделать интерактивный web видео-плеер, в котором пользователь сможет выбирать сценарий. То есть, чтобы на определённом моменте ролика прямо поверх видео вылезали кнопки с вариантами ...
Полина Муранова's user avatar
1 голос
1 ответ
291 показ

Как запустить рисовку canvas и остановить ее при нажатии на кнопки

let canvas, ctx, w, h; let mousePos; let min; let max; let maxspeed; // an empty array! let balls = []; //let player = {}; const player = { x: 10, y: 10, width: 20, height: 20, ...
user avatar
2 голоса
1 ответ
134 показа

Как анимировать canvas?

По нажатию на кнопку квадрат изменяет позицию. Как сделать это перемещение плавным? Может как то с помощью requestAnimationFrame() или setInterval()? Сам код: let canvas = document....
Владислав Коробков's user avatar
1 голос
0 ответов
207 показов

Линейная интерполяция для рассчета траектории движения обьекта на canvas

Пытаюсь написать свою игру на canvas, но никак не могу нормально рассчитать траекторию полета снарядов при выстреле. По задумке - снаряд летит с фиксированной скоростью по вектору от текущих координат ...
Zoom's user avatar
  • 303
-1 голос
1 ответ
102 показа

Как проверить являеться ли эллипс который вписанный в прямоугольник кругом? [закрыт]

Как проверить являеться ли эллипс который вписанный в прямоугольник кругом?
Nazar Fernos's user avatar
1 голос
1 ответ
614 показов

Запустить готовую функцию в HTML5 Canvas (сгенерированного в Adobe Animate CC), по событию на чем то вне этого Canvas

Подскажите нюанс работы с Adobe Animate HTML5 Сanvas? Доступными средствами программирования в Adobe Animate в документе HTML5 Сanvas я сделал интерактивный ролик. Анимация ракеты запускается по ...
Jack Kosovskiy's user avatar
0 голосов
2 ответа
78 показов

Не могу сделать <canvas> фоном сайта

Не могу объединить картинку, надпись Hello my friend и анимацию <canvas>. Получается либо так, что canvas вытесняет logo и titles, либо <canvas> просто закрывает logo и titles. Помогите ...
alias's user avatar
  • 1
3 голоса
2 ответа
220 показов

Анимация абстракции

Есть вот такая абстракция знаю что через canvas такое анимируется, но не силен в данной области, может кто видел или знает как анимировать?
Karalahti's user avatar
  • 1,322
1 голос
1 ответ
197 показов

Canvas HTML5 перестроение фигуры по заданным координатам

У меня возникла проблема с перестроением фигуры по координатам. На канве нарисованы точки, соединенные линиями. При клике на канву должно происходить одновременное перемещение точек: 1 -> 3 2 -> ...
Riccu's user avatar
  • 329
0 голосов
1 ответ
17 показов

Отложеный рестарт в Adobe Animate cc HTML5 Canvas

Подскажите, пожалуйста, можно ли, и если да, то как, в Adobe Animate cc HTML5 Canvas сделать, чтобы страница сама перезагружалась каждые 10 мин.
Aleka Dankova's user avatar
-4 голоса
1 ответ
361 показ

Линии и точки на картинке при помощи JavaScript

Задача - кликнуть на картинке в точку (А), затем кликнуть курсором в любое место на картинке (B), между двумя этими точками должна появиться линия, линий может мыть множество, но если из конечной ...
Dopster's user avatar
  • 85
4 голоса
1 ответ
802 показа

Как реализовать игровую камеру для HTML 5 Canvas (приближение/удаление камеры)?

Собственно задача реализовать камеру, которая будет следовать за игроком в игровом мире с возможность приближать/удалять камеру от игрока. Реализовать следование камеры за игроком довольно просто: ...
pank's user avatar
  • 2,548
2 голоса
1 ответ
37 показов

Canvas второй цвет, удаление значения из массива

Есть canvas с кругами. Проблемы в том, что круги мерцают(это из-за удаления объекта из массива), я вроде бы удаляю тот элемент, который надо и на секунду удаляется еще один элемент, и потом сразу же ...
Василий's user avatar
1 голос
1 ответ
176 показов

Нахождение угла и биссектрисы

Как сделать чтобы дорисововались лучи по точкам и рисовалась биссектриса угла. Можно просто формулу, функцию, но на javascript. До: После <!DOCTYPE html> <html lang="en"> <head&...
Василий's user avatar
1 голос
2 ответа
1k показов

Действие по клику на элемент Canvas

Я пытаюсь сделать плейбл, в котором пользователь кликает на врага и его персонаж начинает его бить. Проблема с кликом на canvas, никак не получается его реализовать. Нужно, чтобы при клике на ...
Ksenia Kuznetsova's user avatar
0 голосов
1 ответ
354 показа

С помощью React Avatar Editor получить круглую картинку, отправить её на сервер и сохранить там

React Avatar Editor. Делаю как в пример: <Dropzone onDrop={this.handleDrop} disableClick style={{ width: '250px', height: '250px' }}> <AvatarEditor ref={this....
Suvitruf - Andrei Apanasik's user avatar
0 голосов
1 ответ
99 показов

Оптимизация javascript canvas

Вопрос возможно глупый, но анимация отображается как будто бы в замедленном времени. Я так понял надо оптимизировать код. Делал 2 канваса, не помогло так еще и код перестал работать. Делал код в одну ...
Василий's user avatar
1 голос
1 ответ
37 показов

Как сделать чтобы настройки соответствовали

Есть количество символов в колонке. В зависимости от ширины экрана количество символов разное, например 9 символов в колонке, а где-то все правильно и их количество как указано. Как сделать, чтобы ...
Василий's user avatar
2 голоса
2 ответа
271 показ

Canvas передвижение анимации вместе с курсором

Как сделать, чтобы эта анимация была не просто посередине, а следовала за курсором? /*=============================================================================*/ /* Smooth Trail /*==========...
Павел Румянцев's user avatar
0 голосов
1 ответ
303 показа

Star-sky при помощи canvas, помощь в оптимизации

Задался идеей написать звездное(анимированое) небо на canvas, по идее все получилось...но когда добавил как фон, сайт начал работать с тормозами, скорей всего я где-то накосячил с кодом отрисовки и ...
Morpi's user avatar
  • 1
0 голосов
1 ответ
191 показ

HTML5 Canvas. Как нарисовать линию тоньше?

На данный момент изучаю библиотеку Konva.js и Vue-konva. Столкнулся со следующей проблемой: [![<template> <v-stage :config="elCanvasContent"> <v-layer> <v-...
Mikhail Krivosheev's user avatar
6 голосов
1 ответ
1k показов

Поворот текста на Canvas

Есть Canvas, на котором отрисовывается изображение. На изображение можно накладывать текст. Можно выбирать угол наклона текста. Изображение можно перемещать по канвасу. Суть в том, что перемещение ...
Ghoul's user avatar
  • 438
0 голосов
1 ответ
166 показов

Как сгладить движущийся по canvas объект?

По canvas движется объект: примитив или спрайт. Если скорость передвижения очень большая то в глаза начинает бросаться что объект отрисовывается только в определённыех точках, в которых он находится ...
Deadik's user avatar
  • 372
2 голоса
1 ответ
117 показов

Animate CC. Movieclip проигрывается только 1 раз

Здравствуйте. Возникла проблема с Animate CC. Я работают с HTML5 Canvas. Почему-то некоторые movieclip-ы перестали быть зацикленными. То есть играют только один раз. FLA файл с примером по ссылке: Не ...
Valejo's user avatar
  • 41
1 голос
2 ответа
435 показов

HTML5 Canvas: Код кнопки, ведущей на веб-страницу

Добрый день! Делаю рекламный баннер, но модерация Яндекс.Дисплея не пропускает, так как переход на целевую веб-страницу с баннера осуществляется всеми кнопками мыши, когда нужно только левой. Adobe ...
Мария Захарова's user avatar
0 голосов
3 ответа
2k показов

Вращение изображения по окружности и одновременно вокруг своей оси

Задача состоит в том, чтобы элемент вращался следующим образом http://joxi.ru/1A5z6gdunxgNgr . Делал на canvas. Но получалось сделать или вращение вокруг оси, или rotate. Но не одновременные действия....
Валерий Воронцов's user avatar
1 голос
1 ответ
72 показа

Почему не подставляется значение в value?

В общем этот код работает лишь в Firefox 54, во всех остальных браузер не работает. В чем может быть проблема? <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">...
emtecif's user avatar
  • 585
1 голос
0 ответов
266 показов

Как создать такой генератор картинок?

Нужно создать генератор картинок на canvas, который будет выводить примерно такое: тут допустим фон и два вида камней. Формы камней буду рисовать вручную. Как создать генератор чтобы камни были ...
TANKIST's user avatar
  • 516
9 голосов
1 ответ
191 показ

canvas не рисует svg в firefox

Cnavas в firefox не рисует SVG если это спрайт, то есть SVG запрашивается не так /icons-sprite.svg, а так /icons-sprite.svg#usd-usage (то есть мы говорим что нам нужен конкретный фрагмент #usd-usage) ...
Clara Oswald's user avatar
3 голоса
0 ответов
85 показов

Изменить высоту грида

У меня проблема с канвасом html5. У меня есть датасэт для заполнения графика в канвасе по данным из базы. Как выставить высоту грида больше на одно деление. Должно выглядеть примерно так: Мой вариант:...
JDoeBloke's user avatar
  • 143
4 голоса
2 ответа
467 показов

Как сделать захват момента видео с помощью JavaScript

Есть довольно интересный вопрос: как я могу захватить конкретный момент видео (с помощью скриншота самого момента конечно) и нарисовать его прямо в <canvas></canvas> не создавая отдельное ...
Eugen Eray's user avatar
  • 1,196