Search the Community
Showing results for tags 'canvas'.
Found 24 results
-
Всем привет! Столкнулся с такой проблемой: как скачать элемент canvas в формате изображения .svg? Заранее спасибо!
-
Вам предстоит: Создание отдельных html-элементов(и блоков) пользовательского интерфейса Тестирование корректности работы элементов в разных условиях Создание css стилей и анимаций Что нам от вас нужно: Опыт frontend-разработки от 2-х лет Опыт работы с HTML5/CSS3, понимание принципов верстки, работы с разными браузерами и устройствами Опыт работы с gulp Знание шаблонов проектирования MVC/MVVM Уверенное понимание принципов работы с Git Приветствуется: Опыт работы с JS и фреймворками к нему Желание разработки и внесения разнообразия в динамику интерфейсов с помощью скриптов Опыт работы с canvas Опыт работы в Gamedev Творческий подход к работе и выполнению задачи Мы предлагаем: Длительную занятость от 6ти месяцев, Перспективы длительного сотрудничества над другими проектам, Оплату два раза в месяц, возможны варианты, Платим ЗП в долларах ) Мы готовы к предоплате, Работу удаленную на фултайм. Резюме ждем на avelnison@gmail.com
-
Вам предстоит: Разрабатывать/придумывать процедурные анимации и эффекты на canvas по готовым шаблонам или полностью с нуля Оптимизировать существующие анимации для достижения максимальной плавности и эффектности Что нам от вас нужно: Опыт frontend-разработки от 2-х лет Опыт работы с canvas Опыт работы в Gamedev Опыт работы с JS, gulp Знание шаблонов проектирования MVC/MVVM Уверенное понимание принципов работы с Git Приветствуется: Опыт работы с js-фреймворками по типу nodeJS, createJS, angularJS и подобными Опыт работы с html5/css3 Опыт работы с webGL и шейдерами Креативность, инициативность, творческий подход к работе Большое желание творить и создавать уникальные и красивые произведения Мы предлагаем: Длительную занятость от 6ти месяцев, Перспективы длительного сотрудничества над другими проектам, Оплату два раза в месяц, возможны варианты, Платим ЗП в долларах ) Мы готовы к предоплате, Работу удаленную на фултайм. Резюме ждем на avelnison@gmail.com
-
Здравствуйте. Помогите дописать внешний вид для circle bar. Нужно следующее - http://joxi.ru/E2pkNJdSBNZkWm Пока нашла 2 неплохих плагина, progressbar.js (SVG) и radialIndicator.js (Canvas). Как дописать тот красный кружок?
-
Всем привет, вот незадача - не могу никак понять по какому принципу осуществить остановку анимации объектов в канве (скажем при наведении на объект курсора). По гуглам искал, находил, смотрел, читал, но так ничего и не смог оживить. Плюс к тому осваиваю библиотеку fabric.js - скорей всего там есть возможность паузы (думаю даже в StaticCanvas). Кто что может посоветовать?
-
помогите пожалуйста повернуть каждую цифру на 90 градусов. результат должен выглядеть так. у меня пока получается только так вообще я пытаюсь нарисовать систему координат. с вертикальной осью проблем нет
-
Туплю, выгуглить что-то подходящее тоже не могу. По сути - есть канва, в ней создается фигура (скажем звездочка) и эту звездочку нужно заполнить фоновым повторяющимся рисунком. Окей, можно создать паттерн, но тогда он принимает картинку с исходной шириной и высотой, а мне к примеру нужно изменить высоту фона (фон полосатый и ширина полоски важна). Есть же ф-ция drawImg, но как разрисовать этой функцией звездочку ума не приложу. Создавать канву в канве - тоже не пойму что куда. На в3скул есть песочница для паттерна и еще одна для дравИмг. Рисунок можно менять только в скрипте. Памагыте кто только может. Спасибо.
-
http://jsfiddle.net/ogb7kbLw/ <!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title></title><STYLE>.button-master {border: 1px solid #000;padding: 2px; /* вопрос б *///float: left; /* вопрос в */} .button-slave {padding: 2px;background: #aaa;font-size: 13px;font-weight: bold;border: 1px dashed #fff;color: #fff;}.canvas {display: inline;} canvas {//position: absolute; /* вопрос г *///float: left;}</STYLE></head><body><HEADER></HEADER><SECTION><NAV></NAV><ARTICLE><span class="button-master"><span class="button-slave">Элемент</span></span><div class="canvas"><canvas id="icon01" width="16" height="16" style="border:1px solid red;"></canvas></div><div class="canvas"><canvas id="icon02" width="16" height="16" style="border:1px solid green;"></canvas></div><div class="canvas"><canvas id="icon03" width="16" height="16" style="border:1px solid blue;"></canvas></div></ARTICLE></SECTION><FOOTER></FOOTER></body></html>Несколько вопросов вызывает данный код. а. Почему элементы изначально позиционированы не ровно, здесь какой тип элементов canvas или span не ровный по высоте? На jsfiddle они ровные, что странно, проверьте всё-же в IE. Далее по порядку, каждый вопрос это закомментированный в коде стиль, применяется только отдельно, но не все сразу. б. Для .button-master padding два пикселя. Почему если его закомментировать .button-slave по высоте выходит за границы родительского элемента .button-master? в. Почему если раскомментировать float для button-master тогда элементы все ровняются, но по верхнему краю? г. Почему если раскомментировать position для canvas, эти элементы ровняются по центру, что мне и нужнее всего. Но при этом они создают коллапс, все позиционируются в одно место, один в другой. Какое решение здесь можно применить? UPD. Определил способ позиционировать canvas. Установить для canvas position: relative; и далее позиционировать по высоте top; относительно родительского div. Но всё-же интересуют все соображения по вопросам.
-
Столкнулся с довольно простой задачей. Есть картинка с планом здания, там есть комнаты, они не все квадратные, некоторые неправильной формы. Соответственно нужно при наведение на некоторую комнату затенить область. На выбор были Canvas, SVG и Map, я решил использовать SVG. Все оказалось весьма просто, нарисовать через path комнаты, добавить на :hover затенение и отлично, однако возникла проблема. Стало необходимо ресайзить SVG не только с нарисованными областями, но и с картинкой на background. Вот пример http://codepen.io/anon/pen/WvXqOd
-
Всем привет. Хочу на сайте создать блоки произвольной формы. Скрин ниже. Пробовал через SVG - да, получается, но мне это не подходит. Многовато будет весить страница, если таких фигур будет несколько. Так что этот вариант отпадает. Canvas - тоже не подходит. Ведь там JS, а он не у каждого пользователя включен (в браузере). Этот вариант тоже отпадает.CSS - я не знаю, как с помощью CSS нарисовать такой блок. Нашёл лишь свойства, которые могут помочь: [сode]z-index, border-radius, border-width, transform, transform-origin, display, :after, :before, position. Но как - я не знаю. Пробовал просто "налепливать" фигуру на фигуру, чтобы получить нужную, но не получилось. Нет, получилось, но не так, как нужно. У многих "налепленных" фигур был фиксированный размер, а мне нужен резиновый. То есть в процентах. Помогите, пожалуйста.
-
Всем привет! Срочно ищем в офис в Москве на полную ставку отвязного frontend-разработчика с навыками джедая. Полное описание вакансии здесь: https://moikrug.ru/vacancies/1000021706 Пишите на почту из текста вакансии или мне в личку.
-
Помогите есть канвас нужно в него вставить input.button или img, вставлял картинку через new Image все отрисовывает но такая картинка не воспринимает onclick, или есть способы добиться этого?
-
Вот код, почему не срабатывает onclick? <!doctype html> <html> <meta charset='utf-8'> <head> <title>imgExample</title> <script src ='file:///E:/www/draw.js'></script> </head> <body> <canvas id='example' width = "640" height="480"></canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'), // Контекст picfon = new Image(); // "Создаём" изображение picfon.src = 'file:///E:/www/background/background.png'; // Источник изображения button1 = new Image(); button2 = new Image(); button3 = new Image(); button1.src = 'file:///E:/www/button/button1.png';//Кнопка ВОТ!... button2.src = 'file:///E:/www/button/button2.png';//Кнопка ЕЩЕ! button3.src = 'file:///E:/www/button/button3.png';//Кнопка Рассказать другу. picfon.onload = function() { // Событие onLoad ctx.drawImage(picfon, 0, 0); // Рисуем изображение ctx.drawImage(button1, 190, 360);//Отрисовка кнопки вот! } button1.onclick = function ajaj() { ctx.drawImage(button2, 100, 100); } </script> </body></html>
-
Здравствуйте, прошу помогите, задача очень простая! Нужно сделать, canvas с фоном, картинки есть, на canvase кнопка, при её нажатии отрисовывается на фоне еще одна картинка...помогите пожалуйста, в html не бум бум...
-
Нарисовал кнопку в фотошопе, добавил в canvas, теперь незнаю как добавить на картинку событие onclick, через тэг <img> неподойдет...
-
Здраствуйте, прошу помогите сделать вот такую конструкцию прошу очень срочно нужно
-
Добрый день, помогите пожалуйста, сама задача, для приложения вконтакте надо сделать, canvas + картинка которая ложится сверху, допустим у нас есть есть две папки, в одной фон, во второй картинки, картинки выбираются рандомно...и еще должна быть возможность позиционировать картинку...помогите пожалуйста...
-
Добрый день, не могли бы вы подсказать как создать движок с двумя папками, в одной фон, в другой н объектов. все картинки Надо сделать кнопку и картинку склеенные. Фон+случайный объект из папки) Но мне надо, чтобы я мог менять объекты и позиционировать все объекты Один раз ставлю точку т в цент подставляются разные объекты...помогите пожалуйста очень срочно надо
-
Как убрать линии? http://jsfiddle.net/a254ktu2/
-
Доброва времени суток населению форума, у меня тут довольно странный вопрос, меня интересует, могу ли я запускать canvas приложения через определённое canvas-же приложение. Т.е. я хочу создать некую оболочку для запуска этих приложений, и меня интересует как запускать их внутри себе подобного. Нужно использовать какие-то фреймы, ссылки, или к примеру надо динамично редактировать основной код (недолго в программирование, наверное фигню сморозил). Ответьте пожалуйста, как это сделать .
-
Здравствуйте! Не могу догнать как сделать чтобы косые линии, что исходят из терминала, дотягивались плавно до рамки над параграфом. Суть задумки такая прокручивается страница до терминала и из него вытягиваются линии и после плавно появляется блок с текстом. Думаю может как с помощью canvas можно сделать плавный эффект вытягивания.
-
Добрый день, форумчане! У меня к вам есть вопрос/просьба. Нужен ваш совет. Каким образом можно обрезать изображение так, чтобы они могли быть редактируемы. Т.е. сейчас это 1 картинка. Хотелось бы иметь возможность заливать 2 картинки так, чтобы браузер их сам обрезал. В каком направлении нужно работать ? Существует ли jQuery плагин? Или можно это как-то реализовать на html 5 canvas ?
-
Задача: сделать карту изображения для масштабируемой растровой картинки. Насколько я понял нужно: 1. использовать canvas 2. Загрузить в него картинку 3. Как-то пропорционально картинке масштабировать canvas под экран (использовать еще одно прозрачное изображение с пропорциями картинки? картинку делать бекграундом? Что-то с ходу ничего не получается.) 4. Нарисовать карту в прозрачных svg 5. Наложить svg поверх и задать им ссылки Плотно еще не разбирался, но у меня сомнения - можно ли это вообще сделать?
-
Здравствуйте! Требуется программист html5 (canvas) для онлайн сервиса. Проект похож на этот сервис - http://prezi.com Важно Портфолио с подобными проектами (сервисами, играми и т.п.) с описанием Ваших функций в проекте, это необходимо предоставить для того, чтобы мы могли определить Ваш уровень. Что за сервис нужно будет делать расскажем подробнее после просмотра портфолио. Портфолио можно отправлять в личку, ссылкой или на почту a@5sf.ru Если вы супер классный и уверены что справитесь, стучите в скайп - frunze56
