Рубрика «canvas» - 22

в 7:34, , рубрики: android, canvas, mobile development, Блог компании Luxoft, метки: ,

Предположим мы решили написать новое Android приложение. В силу же дизайнерских соображений, стандарные UI компоненты нам не подходят и мы будет рисовать много графики через Canvas или OpenGL ES. Последний способ несколько более трудоемкий, поэтому мы его пока рассматривать не будем. Нас интересует производительность вывода графики на Canvas. Можно ли её ускорить? Если зайти на официальный сайт андроида или блог разработчиков, то можно заметить, что начиная с Android 3.0 (API level 11), в платформе появилась возможность включать аппаратное ускорение Canvas для вывода 2D графики.

Вы можете подумать: "Супер! Я сейчас же добавлю флаг аппаратного ускорения в мое приложение!". Тем более, некоторые сайты утверждают, что приложение спокойно будет работать на Android 2.x — такие приложения просто будут игнорировать флаг ускорения. Другие же сайты говорят, что аппаратное ускорение включено по-умолчанию начиная с Android 4.0. На самом же деле все не так.

И конечно же нас интересует вопрос, насколько повысится производительность приложения при включении аппаратного ускорения.

image
Читать полностью »

в 8:15, , рубрики: canvas, game development, GameDevelop, javascript, web-разработка, метки: , , ,

Изометрия — вещь, стара как компьютерные игры.
Сейчас пришло время, когда интернет и игры стали совмещаться в браузере (flash не в счет).
Примеров браузерных игр много, большая часть из них казуалки, но для гиков
более интересны жанры action, RTS и RPG, а для разработчиков — их реализация.

Для жанра RTS, RPG и пошаговых стратегий матрица является основным механизмом для движения
юнитов, рисования текстур и многое другое. Но когда Вы попробуете объеденить
матрицу и изометрические текстуры, Вы попадете в ад, с которого вы не вылезите,
пока не напишете прослойку для управления и воздействия на эту матрицу.

Под катом я расскажу:

  1. Как рисовать изометрическую матрицу
  2. Как нарисовать fullscreen изометрическую матрицу

Читать полностью »

в 10:46, , рубрики: canvas, html5, javascript, WebGL, Веб-разработка

WebGL-2d — весьма интересная javascript библиотека, реализующая стандартные методы для работы с 2d контекстом Canvas на WebGL контексте.

Ни для кого не секрет, что сегодня Canvas не может похвастаться хорошей производительностью и отрисовка сложных сцен в реальном времени может стать проблемой. С WebGL ситуация с производительностью существенно лучше, но этот стандарт поддерживают не все популярные браузеры, в частности Microsoft даже не планирует внедрять его поддержку в IE (сторонние разработчики по этой причине уже начали делать плагин).

Подключив WebGL-2d и добавив всего пару строчек, мы можем существенно ускорить отрисовку графики, реализованную с средствами Canvas 2d API в браузерах, поддерживающих WebGL и обеспечить fallback к обычному 2d контексту.

Читать полностью »

в 18:05, , рубрики: canvas, javascript, life, Алгоритмы, жизнь, ненормальное программирование, метки: , ,

Пишем и оптимизируем Жизнь Конуэя на JSОбновляя недавно дизайн своего хомяка, подумал – а не сделать ли мне какую-нибудь необычную страницу с 404-й ошибкой? Поскольку в детстве я был впечатлен Жизнью Конуэя (как возможно и многие из читателей), решил её на JS и реализовать.

Казалось бы, что сложного в Жизни: если у занятой клетки 2 или 3 соседа – она остается, если у пустой ровно 3 – рождается? В этой статье я и расскажу о своей оптимизации алгоритма и отрисовки в canvas-е, и некоторых не очевидных моментах целочисленной/бинарной арифметики в JavaScript.

Забегая вперед, конечный результат можно увидеть тут, исходники видны там же (да еще и по лицензии CC BY).Читать полностью »

в 9:15, , рубрики: canvas, gauges, html5, javascript, метки: , , ,

Добрый день!

Сегодня я хочу поделиться своей небольшой разработкой, которую я делал для одного из своих проектов. На самом деле, в сети множество реализаций gauge, как платных, так и бесплатных. Но найти хооть одно решение с использованием именно canvas мне не удалось, поэтому было принято решение написать свое.
Читать полностью »

в 5:57, , рубрики: canvas, jquery, jquery plugins, озеро, метки: ,

[скриншот]Стал известен скрипт lake.js — плагин jQuery, который берёт иллюстрацию (элемент <img>) и помещает её на холст (вставляет элемент <canvas>), располагая сразу под нею зеркальное отражение, идущее волнами — будто в воде озера.

Речь идёт не о застывших волнах, а об идущих по воде волнах — их фаза динамически изменяется джаваскриптом. (Понятно, что на Хабрахабре этот эффект не воспроизводим, так что я вставляю статический скриншот.)

Холст имеет ту же ширину, что и обрабатываемая иллюстрация, и вдвое бóльшую высоту.

Вызов плагина выглядит сравнительно просто и самоочевидно:

<script src="jquery.js"></script>
<script src="lake.js"></script>
<script>
$(function() {
   $('#lake-img').lake({
      'speed': 1,
      'scale': 0.5,
      'waves': 10
   });
});
</script>
...
<img id="lake-img" src="lake.png" style="display: none;"/>

Читать полностью »

в 11:33, , рубрики: canvas, html5, javascript, тригонометрия, метки: , , ,

Давно хотел начать изучение HTML5 canvas, и наконец решительно за него взялся. Первое что я решил попробовать это отображение различных фигур с помощью стандартных линий в «псевдо 3D». Когда-то давно я подсмотрел очень интересный способ в плагине к winamp'у и решил реализовать его самостоятельно. В 2002 году я это сделал на C++, ну а теперь пришло время для переноса этого чуда на HTML и JavaScript.
Читать полностью »

в 20:14, , рубрики: canvas, css, техники, треугольники

Скорее всего, вы уже знаете, как сделать треугольник на чистом CSS, использовав свойство border. Если же не знаете, то можно почитать, например, здесь. Но что, если вам понадобятся треугольники с тенью?

Треугольники с тенью на CSS

Классическая манипуляция с бордером не может изменить форму объекта, это всего лишь визуальный обман.
Т.е. нельзя просто взять и добавить box-shadow к такому треугольнику, потому что получим что-нибудь в таком роде:

Треугольники с тенью на CSS

Давайте посмотрим на несколько альтернативных решений.
Читать полностью »

в 12:39, , рубрики: canvas, javascript, Paper.js, Raphael.js, web-drawing, Веб-разработка

Набрёл на статью со сравнением трёх JS библиотек для рисования в WEB Paper.js, Processing.js и Raphael.js. Думаю она будет интересна не только мне.

Прежде чем начать рисовать что-либо в браузере, спросите себя о следующих трёх вещах:

Web Drawing библиотеки: Paper.js Vs. Processing.js Vs. Raphael.js

  • Вам нужна поддержка старых браузеров?
    Если ответ да, тогда единственный выбор, это Raphaël. Он поддерживает браузеры вплоть до IE 7 и Firefox 3. У Raphaël есть даже ограниченная поддержка IE 6, несмотря на то, что некоторые базовые для библиотеки технологии не могут быть реализованы в этом браузере.
  • Вам нужна поддержка Android?
    Android не поддерживает SVG, так что вам придется использовать Paper.js или Processing.js. Существуют слухи, что Android 4 будет поддерживать SVG, но большинство современных Android устройств уже не будет его поддерживать.
  • Ваш рисунок интерактивный?
    Raphaël и Paper.js сосредоточены на взаимодействии с рисуемыми элементами посредством клика мышкой, перетаскивания и касания. Processing.js не поддерживает никаких события уровня объекта, потому обработать движения пользователя в нём довольно сложно. Processing.js может рисовать классную анимацию на Вашей домашней страничке, а Raphaël и Paper.js более подходят для интерактивных приложений.

Читать полностью »

в 22:26, , рубрики: canvas, Инфографика, Программирование

Как вы уже давно привыкли, график вещественной функции в математике — некая кривая, которая показывает, как ведёт себя функция при изменении её аргумента. Иногда эта кривая может быть весьма красива, особенно, если речь идёт о графиках некоторых уравнений, как, например, этого.
Но в данном посте речь пойдёт о функции двух вещественных аргументов. И возвращать эта функция будет не число, а оттенок цвета. Да-да, значение от 0 до 255, которое будет зависеть от положения точки, то есть от двух её координат (раз уж мы собрались делать плоский рисунок). Кто до сих пор слабо представляет, о чем идёт речь, объясню на примере. Вот график функции cos(x*y):
image

Что можно сказать, глядя на этот график? Ну во-первых, что функция наша в каком-то роде периодична. Во-вторых, на первом промежутке монотонности она убывает. Ну действительно: при движении от левой верхней точки рисунка вправо или вниз, цвет становится более тёмным, то есть, значение функции стремится к нулю. А теперь, друзья, пришла пора развлекаться. Погнали.
Читать полностью »

1...10...212223...24
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js