Category: canvas

30
Окт
2020

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

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

30
Окт
2020

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

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

29
Окт
2020

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

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

27
Окт
2020

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

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

27
Окт
2020

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

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

25
Окт
2020

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

Что надо исправить или переписать чтобы заблокировать движение(квадрата) только в направление стены ?
Код
function lineLineIntersects(a, b, c, d, p, q, r, s) {
var det, gamma, lambda;
det = (c – a) * (s – q) – (r – p) * (d – b);

22
Окт
2020

Как правильно добавлять параметры для элементов в p5.js?

Как правильно добавлять параметры к элементу используя методы p5.js(canvas)? Могу предположить несколько вариантов:

Применять, а после сбрасывать стили:
strokeWeight(10); // было 1
stroke(color); // transparent
line(mouseX, mouseY, pm…

22
Окт
2020

Как в p5.js назначить событие на элемент?

Здравсвуйте! Делаю мини игру на p5.js. Появилась необходимость сделать кликабельные места.
Вопрос: Как правильно назначать события на элементы. В данный момент использую по системе координат:
const mousePointer = v => v[0] <= mouseX …

20
Окт
2020

Столкновение квадрата со стеной

Как проверить столкновение квадрата со стеной? Что бы квадрат, не входил друг в друга. То есть, чтобы при столкновении они упирались друг в друга, но не входили.
Код
Попытался реализовать но чет не получается
walls.forEach(el => {
i…

16
Окт
2020

Как перенести Pattern в Canvas

Есть Pattern который создается на точках 0,0 как его переместить на координаты круга?
const nicepic = ‘1.png’;
pattern = ctx.createPattern(nicepic, ‘norepeat’);
ctx.arc(150, 200, 100, 0, Math.PI*2);
ctx.fillStyle = pattern;
ctx.fill();

14
Окт
2020

Перемещение по сетке

Как можно реализовать перемешенные по сетке? Что бы квадрат перемещался строго по сетке и не смог остановиться посередине клеточки
Код

const canvas = document.querySelector(“#canvas”);
const ctx = canvas.getContext(“2d”);

cons…

13
Окт
2020

Перемещение по сетке

Как можно реализовать перемешенные по сетке?
Что бы квадрат перемещался строго по сетке и не смог остановиться посередине клеточки
Код
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d"…

07
Окт
2020

JavaScript: сохранить значение цвета каждого пикселя изображения

Что я хочу сделать: загрузить изображение и считать его попиксельно, чтобы сохранить значение каждого пикселя.
Что я делаю:
let canvas = document.createElement("canvas");
let image = document.createElement("img");
image…

05
Окт
2020

Загрузка файла на компьютер пользователя на JS

Реализую web-интерфейс для онлайн обработки картинок (на canvas), столкнулся с проблемой (скорее возник вопрос реализации):
Текущий принцип работы: пользователь загружает картинку она перекодируется в base64 и сохраняется в localStorage. Д…

05
Окт
2020

Загрузка файла на компьютер пользователя на JS

Реализую web-интерфейс для онлайн обработки картинок (на canvas), столкнулся с проблемой (скорее возник вопрос реализации):
Текущий принцип работы: пользователь загружает картинку она перекодируется в base64 и сохраняется в localStorage. Д…

29
Сен
2020

как отследить нажатие на повернутый спрайт html Canvas

Я решил создать игровой движок на js и столкнулся с проблемой отслеживания события клика. Проблема в том что спрайты в движке могут быть повернуты. я использую вот этот код для рисования спрайтов:
draw(){
this.context.save();
this….

29
Сен
2020

не работает click в canvas

Есть img в canvas! Поворачиваю на Math.PI / 3 (60 град.) Ctx.rotate () – поворачивается !!! Вешаю событие щелкни по холсту – ничего не происходит !? В чем дело ???
let dest = Math.PI / 3;
let canvas = document.getElementById("canvas&…

23
Сен
2020

Ввод текста в canvas

Без градиента текст выводится, но с градиентом его нет, не могу понять почему. И ещё, как можно сделать так, чтобы пользователь сам выбирал цвет текста?

<canvas id=”canvas” width=’600px’></canvas>
<input type=”text” id=”…

23
Сен
2020

Ввод текста в canvas

Без градиента текст выводится, но с градиентом его нет, не могу понять почему. И ещё, как можно сделать так, чтобы пользователь сам выбирал цвет текста?

<canvas id=”canvas” width=’600px’></canvas>
<input type=”text” id=”…

22
Сен
2020

Проблемы с отключением размытия изображения в canvas

Я занялся разработкой пиксельной рисовалки на canvas, но столкнулся с проблемой, что canvas ставит размытие на пиксели при перемещении по полю. Само перемещение сделано через CSS-преобразования такие как: top,left,transform: scale(). Сам c…

21
Сен
2020

canvas не позволяет выделить текст

После использования canvas не могу выделить текст как по дефолту (по символьно), не могу понять что не так. Менял z-index самого канваса и контента но не помогло. В чём может быть проблема?
Код здесь
ссылка
<span>some text</span&g…