Вопросы с меткой [html5-canvas]
Руководство по использованию метки html5-canvas отсутствует.
48
вопросов
1
голос
0
ответов
37
показов
Текстуры и картинки в HTML canvas
Я пишу браузерную игру, где для отрисовки игроков (танчиков) использую графические примитивын: полигоны, круги, и.т.п. Я хочу делать танки не монотонно-зелёными или серыми, а также добавить камуфляж. ...
0
голосов
0
ответов
21
показ
Равномерно распределить в центре области случайное количество окружностей
нужно нарисовать в центре canvas случайное количество окружностей, причем расположить их вплотную, соприкасаясь краями друг с другом. Это нужно для схематичного вида сверху на букет цветов, только ...
0
голосов
1
ответ
38
показов
Изменение размера Rect
Как реализовать изменение размера прямоугольника или квадрата пропорционально?
Допустим потянув за поинтер который находится на нижнем левом угле.
Имеются координаты поинтера X|Y
Координаты мыши на ...
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" : ...
2
голоса
1
ответ
660
показов
Как сделать коллизию двух блоков на Canvas JavaScript с учетом стороны колизии
Делаю игру на JavaScript на Canvas, сделал передвижение персонажа и гравитацию, но никак не могу сделать правильную коллизию, такую, что она работала при слишком больших/маленьких размерах блока.
...
1
голос
0
ответов
79
показов
Как обеспечить минимальный радиус кубическим Безье?
Строится кривая, состоящая из множества кубических Безье, следующих друг за другом. Пробую обеспечить отсутствие крутых поворотов со сверхмалым радиусом, изломов.
Для этого вычисляю угол, образующийся ...
2
голоса
4
ответа
198
показов
Как оптимизировать или исправить анимацию волны?
Делаю примитивную анимацию волны. Но столкнулся с проблемой. Первая кривая Безье не согласуется с последующими, из-за этого пришлось спрятать этот участок за холстом.
Как можно упростить анимацию, ...
4
голоса
1
ответ
151
показ
Текст в canvas масштабируется рывками, как можно сделать эффект более плавным?
Есть canvas, на котором отрисован текст. Холст перерисовывается согласно requestAnimationFrame(), при этом в каждом кадре увеличивается масштаб. Проблема: текст отрисовывается каждый раз как будто в ...
2
голоса
1
ответ
104
показа
Вычисление координат вершины кривой Безье;
имеется кривая безье построенная по 3 точкам. как определить реальные координаты высоты отрисованной кривой?! Использую CreateJS (EaselJS) функция Graphics.BezierCurveTo ( cp1x cp1y, cp2x, cp2y, x, y ...
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 = ...
0
голосов
0
ответов
67
показов
Как прервать линию при передаче координат мыши через сокет?
Сайт онлайн доска на которой рисуют несколько пользователей.
По сокету передаются координаты мыши и при получении отображаются на стороне клиента, на канвасе. Но когда пользователь отпускает мышь, ...
0
голосов
1
ответ
162
показа
Анимация конфетти(canvas) с snap.js
Учу с нуля. Но ответа на данный вопрос не нашел
Нашел единственно подходящую анимацию конфетти. Вставил ее в конец HTML, и теперь есть анимация при открытии страницы поверх моего snap.js:
<script ...
1
голос
1
ответ
58
показов
Игрок неправильно передвигается
Я пишу онлайн игру по типу агарио. Код перемещения игрока я сделал таким:
function sq(x) { return x*x; }
var mX = playerMouse.x; // Координаты мышки по X
var mY = playerMouse.y; // Координаты мышки ...
1
голос
1
ответ
182
показа
Canvas нанести текст на изображение, чтобы текст был частью изображения
Делаю игру papers, please в браузере.
Сейчас реализовано:
Есть стол, на нем документы, которые можно перетаскивать (пока перетаскиваю цветные прямоугольники)
Есть данные документов (имя, фамилия, ...
5
голосов
1
ответ
338
показов
Какие существуют стратегии при работе с Canvas?
С канвасом знаком поверхностно -
при первом знакомстве столкнулся с таким гайдом в разрезе работы с vue.js:
Controlling the HTML5 Canvas with Vue.js
Вопросы:
Позволяет ли такой способ работать со ...
3
голоса
1
ответ
108
показов
Как сделать много анимаций в одном canvas?
Помогите пожалуйста разобраться с canvas'ом.
Написал такой скрипт:
const ctx = canv.getContext('2d');
const crossImg = new Image();
crossImg.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...
0
голосов
1
ответ
188
показов
Почему не отображается изображение после наложение на canvas?
есть код
var canvas = document.getElementById("myCanvas"),
context = canvas.getContext("2d");
var img = new Image();
var imgT = new Image();
...
0
голосов
1
ответ
111
показов
На чём лучше всего делать свой интерактивный web видео-плеер с возможностью выбора сценария продолжения?
Ребята! Хочу сделать интерактивный web видео-плеер, в котором пользователь сможет выбирать сценарий. То есть, чтобы на определённом моменте ролика прямо поверх видео вылезали кнопки с вариантами ...
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,
...
2
голоса
1
ответ
134
показа
Как анимировать canvas?
По нажатию на кнопку квадрат изменяет позицию. Как сделать это перемещение плавным?
Может как то с помощью requestAnimationFrame() или setInterval()?
Сам код:
let canvas = document....
1
голос
0
ответов
207
показов
Линейная интерполяция для рассчета траектории движения обьекта на canvas
Пытаюсь написать свою игру на canvas, но никак не могу нормально рассчитать траекторию полета снарядов при выстреле. По задумке - снаряд летит с фиксированной скоростью по вектору от текущих координат ...
-1
голос
1
ответ
102
показа
Как проверить являеться ли эллипс который вписанный в прямоугольник кругом? [закрыт]
Как проверить являеться ли эллипс который вписанный в прямоугольник кругом?
1
голос
1
ответ
614
показов
Запустить готовую функцию в HTML5 Canvas (сгенерированного в Adobe Animate CC), по событию на чем то вне этого Canvas
Подскажите нюанс работы с Adobe Animate HTML5 Сanvas?
Доступными средствами программирования в Adobe Animate в документе HTML5 Сanvas я сделал интерактивный ролик. Анимация ракеты запускается по ...
0
голосов
2
ответа
78
показов
Не могу сделать <canvas> фоном сайта
Не могу объединить картинку, надпись Hello my friend и анимацию <canvas>. Получается либо так, что canvas вытесняет logo и titles, либо <canvas> просто закрывает logo и titles.
Помогите ...
3
голоса
2
ответа
220
показов
Анимация абстракции
Есть вот такая абстракция
знаю что через canvas такое анимируется, но не силен в данной области, может кто видел или знает как анимировать?
1
голос
1
ответ
197
показов
Canvas HTML5 перестроение фигуры по заданным координатам
У меня возникла проблема с перестроением фигуры по координатам. На канве нарисованы точки, соединенные линиями.
При клике на канву должно происходить одновременное перемещение точек:
1 -> 3
2 -> ...
0
голосов
1
ответ
17
показов
Отложеный рестарт в Adobe Animate cc HTML5 Canvas
Подскажите, пожалуйста, можно ли, и если да, то как, в Adobe Animate cc HTML5 Canvas сделать, чтобы страница сама перезагружалась каждые 10 мин.
-4
голоса
1
ответ
361
показ
Линии и точки на картинке при помощи JavaScript
Задача - кликнуть на картинке в точку (А), затем кликнуть курсором в любое место на картинке (B), между двумя этими точками должна появиться линия, линий может мыть множество, но если из конечной ...
4
голоса
1
ответ
802
показа
Как реализовать игровую камеру для HTML 5 Canvas (приближение/удаление камеры)?
Собственно задача реализовать камеру, которая будет следовать за игроком в игровом мире с возможность приближать/удалять камеру от игрока.
Реализовать следование камеры за игроком довольно просто:
...
2
голоса
1
ответ
37
показов
Canvas второй цвет, удаление значения из массива
Есть canvas с кругами. Проблемы в том, что круги мерцают(это из-за удаления объекта из массива), я вроде бы удаляю тот элемент, который надо и на секунду удаляется еще один элемент, и потом сразу же ...
1
голос
1
ответ
176
показов
Нахождение угла и биссектрисы
Как сделать чтобы дорисововались лучи по точкам и рисовалась биссектриса угла. Можно просто формулу, функцию, но на javascript.
До:
После
<!DOCTYPE html>
<html lang="en">
<head&...
1
голос
2
ответа
1k
показов
Действие по клику на элемент Canvas
Я пытаюсь сделать плейбл, в котором пользователь кликает на врага и его персонаж начинает его бить. Проблема с кликом на canvas, никак не получается его реализовать. Нужно, чтобы при клике на ...
0
голосов
1
ответ
354
показа
С помощью React Avatar Editor получить круглую картинку, отправить её на сервер и сохранить там
React Avatar Editor.
Делаю как в пример:
<Dropzone
onDrop={this.handleDrop}
disableClick
style={{ width: '250px', height: '250px' }}>
<AvatarEditor
ref={this....
0
голосов
1
ответ
99
показов
Оптимизация javascript canvas
Вопрос возможно глупый, но анимация отображается как будто бы в замедленном времени. Я так понял надо оптимизировать код. Делал 2 канваса, не помогло так еще и код перестал работать. Делал код в одну ...
1
голос
1
ответ
37
показов
Как сделать чтобы настройки соответствовали
Есть количество символов в колонке. В зависимости от ширины экрана количество символов разное, например 9 символов в колонке, а где-то все правильно и их количество как указано. Как сделать, чтобы ...
2
голоса
2
ответа
271
показ
Canvas передвижение анимации вместе с курсором
Как сделать, чтобы эта анимация была не просто посередине, а следовала за курсором?
/*=============================================================================*/
/* Smooth Trail
/*==========...
0
голосов
1
ответ
303
показа
Star-sky при помощи canvas, помощь в оптимизации
Задался идеей написать звездное(анимированое) небо на canvas, по идее все получилось...но когда добавил как фон, сайт начал работать с тормозами, скорей всего я где-то накосячил с кодом отрисовки и ...
0
голосов
1
ответ
191
показ
HTML5 Canvas. Как нарисовать линию тоньше?
На данный момент изучаю библиотеку Konva.js и Vue-konva.
Столкнулся со следующей проблемой:
[![<template>
<v-stage :config="elCanvasContent">
<v-layer>
<v-...
6
голосов
1
ответ
1k
показов
Поворот текста на Canvas
Есть Canvas, на котором отрисовывается изображение.
На изображение можно накладывать текст. Можно выбирать угол наклона текста.
Изображение можно перемещать по канвасу.
Суть в том, что перемещение ...
0
голосов
1
ответ
166
показов
Как сгладить движущийся по canvas объект?
По canvas движется объект: примитив или спрайт. Если скорость передвижения очень большая то в глаза начинает бросаться что объект отрисовывается только в определённыех точках, в которых он находится ...
2
голоса
1
ответ
117
показов
Animate CC. Movieclip проигрывается только 1 раз
Здравствуйте. Возникла проблема с Animate CC. Я работают с HTML5 Canvas. Почему-то некоторые movieclip-ы перестали быть зацикленными. То есть играют только один раз. FLA файл с примером по ссылке:
Не ...
1
голос
2
ответа
435
показов
HTML5 Canvas: Код кнопки, ведущей на веб-страницу
Добрый день!
Делаю рекламный баннер, но модерация Яндекс.Дисплея не пропускает, так как переход на целевую веб-страницу с баннера осуществляется всеми кнопками мыши, когда нужно только левой.
Adobe ...
0
голосов
3
ответа
2k
показов
Вращение изображения по окружности и одновременно вокруг своей оси
Задача состоит в том, чтобы элемент вращался следующим образом http://joxi.ru/1A5z6gdunxgNgr .
Делал на canvas. Но получалось сделать или вращение вокруг оси, или rotate. Но не одновременные действия....
1
голос
1
ответ
72
показа
Почему не подставляется значение в value?
В общем этот код работает лишь в Firefox 54, во всех остальных браузер не работает. В чем может быть проблема?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">...
1
голос
0
ответов
266
показов
Как создать такой генератор картинок?
Нужно создать генератор картинок на canvas, который будет выводить примерно такое:
тут допустим фон и два вида камней.
Формы камней буду рисовать вручную.
Как создать генератор чтобы камни были ...
9
голосов
1
ответ
191
показ
canvas не рисует svg в firefox
Cnavas в firefox не рисует SVG если это спрайт, то есть SVG запрашивается не так /icons-sprite.svg, а так /icons-sprite.svg#usd-usage (то есть мы говорим что нам нужен конкретный фрагмент #usd-usage)
...
3
голоса
0
ответов
85
показов
Изменить высоту грида
У меня проблема с канвасом html5. У меня есть датасэт для заполнения графика в канвасе по данным из базы. Как выставить высоту грида больше на одно деление. Должно выглядеть примерно так:
Мой вариант:...
4
голоса
2
ответа
467
показов
Как сделать захват момента видео с помощью JavaScript
Есть довольно интересный вопрос: как я могу захватить конкретный момент видео (с помощью скриншота самого момента конечно) и нарисовать его прямо в <canvas></canvas> не создавая отдельное ...