Comments 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
UFO just landed and posted this here
Если вы про захват видео с камеры:
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). То есть сначала перемещаем виртуальный курсор в стартовую позицию, а потом чертим отрезок.
А можно ли программно узнать текущие координаты курсора? Ну, например, чтобы сохранить их, изменить, а потом восстановить. Казалось бы, очень простая и естественная вещь — но ответа я не нашел.
Sign up to leave a comment.
FAQ по Canvas: задавайте вопросы