Category: canvas

12
Авг
2020

Игра по обводке (заполнению) букв

Всем привет, я пытаюсь создать такую игру. Но у меня проблема с заполнением SVG внутри canvas. Сначала я пытался сделать игру с помощью vanilla js (использую только vuejs), но у меня получилось слишком много багов (я покажу свой код ниже)….

06
Авг
2020

Учу Javascript практикуюсь пишу змейку и получил такую ошибку Uncaught TypeError: Cannot read property ‘getContext’ of null at app.js:2

Вставил код на JSHint никакой ошибки, но браузер выдаёт, в чём может быть проблема?
1. var canvas = document.getElementById(‘game’);
2. var ctx = canvas.getContext(‘2d’);

var ground = new Image();
ground.src = ‘img/ground.png’;

var fo…

01
Авг
2020

Не отображается Fonts Awesome в canvas

Моя задача – нарисовать с помощью Canvas многоугольник и поместить в него одну из иконок Fonts Awesome. Но вместо иконки отображается квадрат с черными границами. Лишь спустя несколько перезагрузок страницы отображается желаемая иконка. Ко…

28
Июл
2020

Canvas: Проблема с разрешением

Написал совершенно обычный код на отрисовку текста.
Правда появилась небольшая проблемка с разрешением canvas.
На Codepen отрисованный текст выглядит как надо, но на том же Google chrome он выглядит сжато/мыльно/ужасно.
Как можно пофиксить…

26
Июл
2020

Как отобразить текст при наведении на область, canvas

Нужно при наведении на соответствующий квадрат отобразить название цвета в рамке (аналог атрибута title в HTML).
Ниже привел код который пока удалось создать:

var ctx = document.getElementById(‘canvas’).getContext(‘2d’);
ctx.fillStyle …

23
Июл
2020

Canvas не отображает картинку

Canvas перестал отображать картинку, при очередном запуске сервера на экране браузера ничего не отобразилось. В коде ничего не изменилось, он просто перестал что либо показывать. Даже если на нем просто порисовать вручную, ничего не выводи…

21
Июл
2020

Node.js: Передать изображение с сервера на браузер

Нужно передать изображение с сервера на браузер. Для этого я передаю браузер массив, в котором содержится локальный путь до изображения. Пользователь может изменять путь до папки с изображениями
Server.js: считываю и записываю в массив пут…

19
Июл
2020

Canvas: Проблема с текстом

Есть два текста с одинаковым размером символов. Каждый текст стоит на своей фиксированной позиции, но стоит написать вместо Текст2 какое-либо другое слово, то Текст1 не сдвигается за ним. Так и должно работать.
Но когда я пишу длинное слов…

15
Июл
2020

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

Делаю игру papers, please в браузере.
Сейчас реализовано:

Есть стол, на нем документы, которые можно перетаскивать (пока перетаскиваю цветные прямоугольники)
Есть данные документов (имя, фамилия, возраст, пол, номер паспорта и тд…)
Есть…

14
Июл
2020

Как отобразить поверх Canvas png без фона?

У меня есть canvas который отображает видео, хочу по вверх него расположить картинку png без фона. Как лучше это сделать? сейчас картинка отображается но с белым фоном(так понимаю отображает Background JFrame), хоть само изображение без фо…

12
Июл
2020

рельеф объекта canvas

вот код:
from tkinter import *
root=Tk()
root.geometry(‘400×400′)
canv=Canvas(root,width=200,height=50,cursor=’pencil’)
canv.place(relx=0.25,rely=0.4375)
Label(canv,relief=’raised’).place(relwidth=1,relheight=1)
canv2=Canvas(root,relief=’r…

12
Июл
2020

Base64 в canvas

Как не указывая размеры Канваса вставить в него изображение base64 чтобы оно гарантировано вместилось полностью, а затем отмасштабировать Канвас по определённым размерам?

10
Июл
2020

Правильное маштабирование canvas.getContext(‘2d’).drawImage

Всем привет, создал функцию которая делает превью из выбранного видеофайла;
При выборе видеофайла в форме загрузки она генерирует маленькое превью из середины видео.
Проблема осталось лишь в том что бы правильно маштабировать картинку для …

04
Июл
2020

Не правильно рисуется вертикальная прерывистая линия canvas

Пытаясь сделать кривую прерывистую линию на js, у меня появилась много проблем, одна из которых – это неправильное отображение вертикальных линий. Иногда они размываются, иногда вообще выглядит как сплошная. Как это решить, помогите пожалу…

30
Июн
2020

Как сделать такую анимацию HTML5 canvas?

Вот как это должно выглядеть

То есть облака должны беспрерывно двигаться по горизонтали.
Как реализовать такую анимацию на JS в Canvas?
Если есть ссылка на какой-либо ресурс буду рад!
Спасибо заранее!!!

28
Июн
2020

Как сделать ,чтобы нарисованные фигуры в HTML5 canvas, двигались с разной скоростью?

Всем Привет!
Как мне сделать, чтобы нарисованные фигуры (два квадрата),
двигались – первый медленней, второй быстрее. (код ниже)
Заранее СПАСИБО за уделенное время!

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta…

26
Июн
2020

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

Задача сделать динамический progress bar.
Во первых должно изменяться время, которое осталось до определённой даты. С этим проблем нет.
Основной вопрос – как сделать так, чтобы цифры заливались по контуру? (этот контур тоже считается динам…

24
Июн
2020

Как реализовать подобный эффект отскока?

Друзья!
Подскажите пожалуйста!
Нужно найти подобный эффект как на сайте oiw.no
Нужно, чтобы при наведении на объект он слегка отпрыгивал от другого и тд.
Есть ли такой эффект?
Куда капать?
Надеюсь на поддержку

21
Июн
2020

змейка на canvas js

Делал змейку на canvas js и возникла маленькая проблема. Вот код, проблему опишу ниже:
// Настройка «холста»
const canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

// Получаем ширину и выс…

20
Июн
2020

Змейка на canvas

Всем доброго времени суток! Есть у меня довольно интересная змейка на canvas js. Вот код:
// Настройка «холста»
const canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

// Получаем ширину и …