Публикации по теме 'html5-canvas'
Круглые индикаторы выполнения с использованием тега Canvas
Это руководство предназначено для создания закрашенных круглых индикаторов выполнения с помощью тега Canvas, как показано ниже:
Прежде чем переходить к коду, нам нужно понять, как нарисовать круг с помощью тега Canvas.
Для тега Canvas круг представлен следующим образом:
Итак, имея это в виду, чтобы нарисовать круг с помощью тега Canvas, мы можем использовать следующий код:
HTML
<canvas width="150" height="150" id="canvas" />
JS
let..
Пустой холст
Думаю, я наконец-то нашла свою нишу в этой области.
В последнее время я работал над некоторыми фронтенд-проектами, и отказаться от них становится все труднее. Я имею в виду, что перерывы, обеды, постоянный сон стали второстепенными по сравнению с созданием крутых анимаций.
Сейчас я трачу больше времени на то, чтобы возиться со своим стилем, чем писать настоящий React. Кажется, что с каждой новой технологией, которую я касаюсь, меня больше всего интересуют визуальные компоненты.
Для..
Сериализовать десериализацию видео в Fabric JS
Я большой поклонник fabric.js , я считаю его самым мощным JS, доступным для работы с холстом HTML5.
Мне было трудно рендерить видео на холст, затем сохранить его как объект JSON и снова отобразить на холсте с помощью loadFromJson .
Поскольку не существует официального способа сериализации и десериализации элемента видео проблема № 3697
Вы можете просто визуализировать видеоэлемент , используя ткань js, но, возможно, будущие выпуски будут с этой функцией, не уверен...
Вопросы по теме 'html5-canvas'
Масштабирование с холстом
В тестовом приложении у меня есть холст с простым прямоугольником. Метод draw вызывается каждые 100 мсек.
как вы можете видеть из кода, я использую колесо мыши для масштабирования всего. Что происходит сейчас, так это то, что все...
31915 просмотров
schedule
07.11.2021
как нарисовать плавную кривую через N точек с помощью холста javascript HTML5?
Для приложения для рисования я сохраняю координаты движения мыши в массив, а затем рисую их с помощью lineTo. Получившаяся линия не гладкая. Как я могу построить единую кривую между всеми собранными точками?
Я погуглил, но нашел только 3 функции...
127084 просмотров
schedule
22.09.2021
HTML5 Canvas анимация clearRect
Я только начал HTML5. У меня проблема с проведением линии после курсора мыши. Это сработает, если я не использую clearRect (если я удалю строку context.clearRect (0, 0, canvas.width, canvas.height);). Любая идея? Я приложил код. Спасибо...
5328 просмотров
schedule
01.11.2021
Как выбрать формы холста HTML5?
У меня есть холст HTML5, на котором я нарисовал несколько фигур.
Я хочу, чтобы при щелчке мышью по любой фигуре она должна была быть выделена (по крайней мере, она может сказать, какая форма выбрана).
Спасибо.
18481 просмотров
schedule
20.11.2021
Нежелательные линии, появляющиеся на холсте html5 с использованием плиток
Я рисую карту на холсте, используя квадраты размером 40 * 40 пикселей. Все хорошо, пока я, смещая холст (используя преобразование), прокручиваю карту. Затем, из ниоткуда, между плитками появляются линии. См. Изображения ниже.
Почему?
1843 просмотров
schedule
11.09.2021
Как заставить HTML5 JavaScript Canvas распознавать касание / касание с iphone / ipad?
У меня очень простая игра HTML5, которая работает должным образом в обычном браузере, но при доступе к ней из браузера на iPhone или iPad она не распознает событие щелчка или событие touchstart.
Исходный код взят из руководства, расположенного...
10433 просмотров
schedule
12.11.2021
Нарисуйте фоновую сетку в HTML5
Я хотел бы нарисовать прямоугольную сетку на фоне с помощью HTML5 Canvas API. Пожалуйста, как это сделать проще всего? (непрозрачность должна быть 0,5)
3194 просмотров
schedule
21.10.2021
.isPointInPath () для штриховых линий и полилиний
Мне нужен механизм для обнаружения события наведения мыши для линий, кривых и полилиний с разной шириной штриха, я уже сделал такой механизм для прямоугольников и эллипсов, поэтому я не новичок в Canvas API. Я очерчиваю все нарисованные объекты и...
2029 просмотров
schedule
12.11.2021
Kinetic.js - создание сетки
Я новичок в Kintetic.js и пытаюсь создать сетку. Ширина 800 пикселей, высота 400 пикселей. И я хочу, чтобы квадраты (20x20) покрывали эту область. Каждый квадрат имеет границу в 1 пиксель. Так что-то вроде этого:
var box = new Kinetic.Rect({...
3804 просмотров
schedule
08.11.2021
Не удается создать изображение в PaperScript / Javascript?
Кажется, я не могу создать изображение типа var imageObj = new Image(); в [Paperscript] [1] для холста HTML5. Paperscript должен быть построен поверх Javascript, поэтому я не понимаю, почему он не работает.
@ Alex Wayne - На моем холсте не...
228 просмотров
schedule
30.09.2021
Мобильное веб-приложение для Android с динамическими графическими кнопками
Я хочу преобразовать настольное приложение Python / wxPython, которое я написал, в мобильное веб-приложение для Android, и хотел бы получить рекомендации по выполнению этого с помощью JQuery Mobile с серверной частью PHP. (Это для внутреннего...
118 просмотров
schedule
19.10.2021
Кто-нибудь знает, почему мой тег холста не отображается в IE 8?
Возможный дубликат: Как я могу использовать элемент холста HTML5 в IE?
Я не уверен, что делаю не так. Я сделал то, что он сказал, но ничего не работает. Я использую сетку, но не думаю, что это проблема. И я тоже не думаю, что это...
570 просмотров
schedule
29.10.2021
HTML 5 Canvas Co-Ordinates и корреляция пикселей браузера?
Я пытаюсь получить холст HTML 5 для работы моего приложения в качестве доски для рисования. Проблема, с которой я столкнулся:
Рисование происходит с некоторым смещением относительно указателя мыши. Я использую метод JQuery .offset для...
148 просмотров
schedule
20.10.2021
Как анимировать фигуры поверх карты-листовки
Я новичок в листовке, ищу совета.
Я хотел бы создать анимацию какого-либо маркера (например, дугу или форму с заливкой html5) для воспроизведения треков GPS на карте. Мне может понадобиться несколько анимированных маркеров, и я хочу, чтобы их...
6038 просмотров
schedule
06.09.2021
рисование линий холстом
Поддерживаются ли пунктирные / пунктирные линии в IE9 Canvas? В настоящее время я делаю что-то очень похожее на следующее:
var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
if (CP && CP.lineTo){...
909 просмотров
schedule
22.10.2021
контекст drawImage / canvas toDataURL значительно отстает в Opera Mobile
У меня есть немного Javascript, который работает на планшете Android под управлением Opera Mobile 12 . Планшет прикреплен к стене в офисе, поэтому он используется всеми, кто работает в этом офисе, в качестве системы хронометража (т. Е. Они...
5156 просмотров
schedule
06.10.2021
Использование операторов JS if для определения того, перетаскивается ли изображение в нужное место на холсте HTML5.
У меня есть несколько «перетаскиваемых» изображений на холсте HTML5. На холсте также отображается ряд изображений «окна описания», и пользователь должен перетащить каждое из перетаскиваемых изображений в соответствующее поле описания.
В настоящее...
181 просмотров
schedule
14.11.2021
Как переместить базовый холст в FabricJS?
Я не понимаю, как этого добиться с помощью FabricJS. У меня есть тканевый контейнер:
<div class="canvasContainer canvasDemo">
<canvas id="canvas" width="1935" height="1380"></canvas>
</div>
с соответствующим CSS:...
903 просмотров
schedule
22.11.2021
Пытаясь создать эффект конфетти в html5, как мне получить разные цвета заливки для каждого элемента?
РЕДАКТИРОВАТЬ:
Для всех, кому интересно, вот и готовый результат.
http://jsfiddle.net/Javalsu/vxP5q/743/embedded/result/
Я использую код, который нашел в этой ссылке
http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect...
21972 просмотров
schedule
28.09.2021
Какая игровая библиотека HTML5 Canvas поддерживает наведение?
Я собираюсь создать простую игру, используя холст HTML5. Вместо того, чтобы делать все вручную, я решил использовать какую-нибудь библиотеку. Я вижу, что существует много (более 100) библиотек, и я проверил около 5-6 из них, однако ни одна из них,...
558 просмотров
schedule
19.09.2021
