Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 67
Интересуют методы улучшения быстродействия (поднятие fps).
fps = 1000 / (16.5 - время_перерисовки_кадра - время_вычисления_кадра)Как правило
время_перерисовки_кадра <<< время_вычисления_кадра. Константа 16.5 зависит от браузера. Совет: Начните с оптимизации функции, которая вычисляет кадр.
Когда нужно использовать Canvas а когда Flash?
Уже спрашивал, но так как в той теме ответа нет — как вывести текст на canvas в IE? Пробовал text.canvas.js с гуглокода — выводит ошибку про отсутствие нечто glyphs. Можно ли без него, или как заставить его работать? Спасибо.
IE9, или IE8-. Если IE8-, то как вы заставили там работать Canvas?
IE8-… excanvas.js с гуглокода
Ссылки: excanvas и text.canvas
Как можно сделать скриншот Canvas?
Для каких целей? Со стороны программиста или со стороны пользователя?
Если «Скриншот канваса === Сохранить канвас как картинку», то:
Важно Вы должны задать фиксированные размеры канваса (через width/height или style), иначе получете плохие данные из toDataURL
/* раз */ canvas.getAsFile("test.jpg", "image/jpeg"); // File https://developer.mozilla.org/en/DOM/File
/* два */ canvas.toDataURL(); // String формата data url
/* пример */
function test() {
var canvas = document.getElementById("canvas");
var f = canvas.mozGetAsFile("test.png");
var newImg = document.createElement("img");
newImg.src = f.toDataURL();
document.body.appendChild(newImg);
}
Важно Вы должны задать фиксированные размеры канваса (через width/height или style), иначе получете плохие данные из toDataURL
Ты хочешь сделать безсмысленным второй топик? =))
Ну почему, фильтровать комментарии на предмет ответов не всегда есть время и желание.
Так что отдельный топик нужен. :)
Так что отдельный топик нужен. :)
1: есть изображение на канвасе. Требуется получить на сервере снапшот (png) какой-то отдельной прямоугольной области изображения.
2: есть изображение в одном канвасе. Как его скопировать в другой канвас? (Есть мысль, что первую проблему можно как-то с помощью этого решить).
3. Есть канвас, на котором сверху висит див с SVG. Как можно получить объединенное изображение в канвасе? (Есть мысль, что можно просто перенести SVG в канвас, а затем вставить один канвас в другой (вопрос 2), но не знаю, можно ли все єто сделать на клиенте)
Интересуют Chrome, FF4; IE9 и Opera по возможности, фолбэк на IE 8 не критичен.
2: есть изображение в одном канвасе. Как его скопировать в другой канвас? (Есть мысль, что первую проблему можно как-то с помощью этого решить).
3. Есть канвас, на котором сверху висит див с SVG. Как можно получить объединенное изображение в канвасе? (Есть мысль, что можно просто перенести SVG в канвас, а затем вставить один канвас в другой (вопрос 2), но не знаю, можно ли все єто сделать на клиенте)
Интересуют Chrome, FF4; IE9 и Opera по возможности, фолбэк на IE 8 не критичен.
Ну тогда очень глупый вопрос — где эта технология применяется? В верстке вообще не разбираюсь, это нужно только для онлайновых рисовалок, игрушек, анимации? Или где эта технология находит основное применение?
Канвас очень хорошо подходит для: высокопроизводительных анимаций, рейтрейсов, фильтров; представления огромного объема данных в реальном времени; 2Д игр. Для всего остального лучше svg.
Подробнее Thoughts on when to use Canvas and SVG
Подробнее Thoughts on when to use Canvas and SVG
Если вы про захват видео с камеры:
API есть только в черновике спецификации Media Capture API ближайший релиз спецификации возможен в PhoneGap — возможно есть в транке. Работать с ним будет очень просто. Вешается обработчик на «устройство», каждый кадр передается в виде картинки в формате data uri:
API есть только в черновике спецификации Media Capture API ближайший релиз спецификации возможен в PhoneGap — возможно есть в транке. Работать с ним будет очень просто. Вешается обработчик на «устройство», каждый кадр передается в виде картинки в формате data uri:
function success(data) {
var container = document.createElement("div");
for (var i in data) {
var img = document.createElement("img");
img.src = data[i].url;
container.appendChild(img);
}
document.body.appendChild(container);
}
function error(err) {
if (err.code === err.CAPTURE_INTERNAL_ERR) {
alert("The capture failed due to an internal error.");
}
else {
alert("Other error occured.");
}
}
navigator.device.capture.captureImage(success, error, { limit: 1 });
Получить базовые знания я могу просто погуглив, но меня пока останавливало ощущение эдакой концептуальности технологии, типа такая штука на вырост. Если в статье будет описание что это вообще такое, какова поддержка браузерами, какова основная область применения, насколько развиты фреймворки и вообще что-то, чтобы заставило меня заинтересоваться канвасом — мне было бы очень интересно почитать.
С другой стороны выше спрашивают про fps, а для меня это пока как из космоса вопрос.
С другой стороны выше спрашивают про fps, а для меня это пока как из космоса вопрос.
Отличия преимущества недостакти в сравнении с «SVG W3C Recommendation and VML»?
*или свг поверх канваса пишется? не совсем в теме в деталях*
Во всех ли браузерах все отрисованное отображается одинаково и как бороться если нет?
*или свг поверх канваса пишется? не совсем в теме в деталях*
Во всех ли браузерах все отрисованное отображается одинаково и как бороться если нет?
Каково самое эффективное решение на данный момент для попиксельного доступа при отрисовке произвольного изображения на Canvas (без WebGL)? Например, ручная прорисовка граней при построении 3D с использованием закраски по Гуро/Фонгу.
Есть ли пути эффективно и кросплатформенно смасштабировать канву со всеми внутренностями под размеры экрана?
context.scale(x,y) перед отрисовкой не работает на iphone 3g (возможно и в других мобильных браузерах, проверять не стал). Если масштабировать каждый элемент при отрисовке — здорово проседает FPS.
context.scale(x,y) перед отрисовкой не работает на iphone 3g (возможно и в других мобильных браузерах, проверять не стал). Если масштабировать каждый элемент при отрисовке — здорово проседает FPS.
Только-только полез копировать комментарий.
И вдогонку: поддержка и быстродействие на Android/iOS устройствах
И вдогонку: поддержка и быстродействие на Android/iOS устройствах
Продвинутые анимации с requestAnimationFrame, ответы на первый комент в этом топике.
Простите, топик с вашим вопросом удалён. Не могли бы вы повторить?
Техническая реализация drawImage по сравнению с putImageData и вытекающие отсюда возможности по оптимизации (можно ли допускать множественные перекрывающиеся drawImage либо нужно складировать все изменения в один массив и потом только отправлять в canvas)
Возможности двойной буфферизации и работы со скрытым canvas
Поддержка на Android-устройствах
Возможности двойной буфферизации и работы со скрытым canvas
Поддержка на Android-устройствах
Интересует самый быстрый способ нарисовать точку (например, для графика). Однопиксельную и четырёхпиксельную, произвольного цвета.
В каком виде хранится, отображается и перерисовывается «мир» в играх с видом сбоку (как playbiolab.com), т.е. игрок побежал вправо камера подвинулась вместе с ним и мир «подвинулся».
Мне было бы очень интересно послушать про типовые реализации основного функционала canvas-библиотек, таких как: эмуляция слоев, определение активного элемента (на котором в данный момент находится курсор), создание системы управления событиями и т. д.
Возможна ли реализация трехмерного игрового мира на канвас и елси да, то как?
Существуют ли какие-то секретные библиотеки (я искал, но не нашел), умеющие рисовать:
1. Линии переменной толщины. В случае с прямыми это относительно несложно реализовать «костыльным» способом, а вот всякие кривые Безье — видимо, только на низком пиксельном уровне.
2. Градиентную раскраску линий. Ну то есть чтобы цвет плавно менялся между узлами вдоль линии, не обязательно прямой. Такая функция есть, например, в OpenGL.
1. Линии переменной толщины. В случае с прямыми это относительно несложно реализовать «костыльным» способом, а вот всякие кривые Безье — видимо, только на низком пиксельном уровне.
2. Градиентную раскраску линий. Ну то есть чтобы цвет плавно менялся между узлами вдоль линии, не обязательно прямой. Такая функция есть, например, в OpenGL.
какую литературу почитать?
Как можно получить цвет определенного пикселя на канвасе?
имеем кучу обведённых(незаполненных) объектов на холсте. есть ли дешёвый и сердитый способ заполнить кликнутый объект? кроме как хранить координаты всех и перерисовывать его.
Насколько различается поддержка в браузерах или все следуют стандарту?
Я тоже хочу в этот топик что-нибудь написать ))
Кто-нибудь рисовал диаграмму Вороного? Хотелось бы глянуть на пример реализации
Кто-нибудь рисовал диаграмму Вороного? Хотелось бы глянуть на пример реализации
Вспомнил вопрос, который меня давно мучает.
Линии рисуются при помощи функций moveTo(x0, y0) и lineTo(x, y). То есть сначала перемещаем виртуальный курсор в стартовую позицию, а потом чертим отрезок.
А можно ли программно узнать текущие координаты курсора? Ну, например, чтобы сохранить их, изменить, а потом восстановить. Казалось бы, очень простая и естественная вещь — но ответа я не нашел.
Линии рисуются при помощи функций moveTo(x0, y0) и lineTo(x, y). То есть сначала перемещаем виртуальный курсор в стартовую позицию, а потом чертим отрезок.
А можно ли программно узнать текущие координаты курсора? Ну, например, чтобы сохранить их, изменить, а потом восстановить. Казалось бы, очень простая и естественная вещь — но ответа я не нашел.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
FAQ по Canvas: задавайте вопросы