Сегодня мы будем тестировать 2 блока кода, выполняющие следующую операцию:
Дается массив, необходимо выбрать все элементы, степень 2 которых больше 5.

В синем углу Вариант А: Низкоуровневый код — старый и страшный (поддающийся частичной оптимизации)

1.    for (i = 0, res = []; i < c; i++) {
2.        t = a[i];
3.        if (t >= 2.236067) {
4.            continue;
5.        } else {
6.            res.push(t * t);
7.        }
8.    }

В красном углу Вариант Б: Высокоуровневый код — молодой и красивый (не поддающийся частичной оптимизации)

1. a.map(function (t) { return t * t}).filter(function (t) { return t > 5});

Битвы будут происходить на 3 аренах.
1. AO args — Параметры объекта активации функции.
2. AO — Локальные переменные объекта активации функции.
3. Global — Глобальные переменные.

Здравствуйте хабровчане.

Решил я сделать отправку изображения с канваса на сервер.
А что из этого получилось смотрите под катом.

Каждый веб-разработчик использует Javascript при создании веб-приложений, а когда дело доходит до отображения нескольких элементов на странице с акцентом на один элемент, без использование слайдеров не обойтись. Слайдеры можно использовать для отображения ленты новостей, изображений или продуктов в той форме, которая была бы удобна пользователям. Ниже представлены несколько интересных решений, которые помогут в создании веб-приложений.

Вышла первая стабильная версия «эмулятора» тега Canvas для Internet Explorer — fxCanvas 0.1a `Mario`.

Самые вкусные особенности:

• в качестве выходного буфера для графики используется флеш, что дает высокую скорость отрисовки;
• близкая к совершенству реализация Canvas API;
• базовая поддержка текста;
• возможность работы с массивом пикселей;
• определение точки-в-контуре;
• возможность загружать картинки в формате data:;

fxCanvas практически полностью реализует Canvas API, но с некоторыми особенностями.

Цепочки комманд и метод invoke

В fxCanvas используется довольно хитрый способ общения с флешом, благодаря которому время, затрачиваемое для передачи буфера с командами, близко к нулю (не буду утомлять техническими подробностями, так как вы можете их узнать, заглянув в исходники). Но как недостаток этого способа — для получения результата контекстной функции нужно вызывать метод через обертку invoke. Взгляните на пример:

var canvas = document.getElementById("cv"),
    ctx = canvas.getContext("2d");

ctx.setFillStyle("#ff0")
    .setStrokeStyle("#0ff")
    .strokeRect(10, 20, 30, 30)
    .fillRect(30, 40, 50, 50)
    .invoke("getImageData", 0, 0, canvas.width, canvas.height, function (imageData) {
        // ... imageData - возвращаемые данные getImageData
    });


В этом примере обработчик вызывается после того, как контекстные команды будут выполнены (и да, это цепочка команд).

Картинки

Для предзагрузки картинок в fxCanvas добавлен метод loadImage:

var canvas = document.getElementById("cv"),
    ctx = canvas.getContext("2d"),
    image_src = "sample.jpg";

canvas.onload = function(img) {
    if (img.src.indexOf(image_src) > -1) {
        ctx.drawImage(img, 10, 10);
    }
}
canvas.loadImage(image_src);


Кроме того, картинки могут быть в формате data: URI.

Карта пикселей

Карта пикселей (image data), вероятно, одна из самых интересных особенностей fxCanvas, так как эта штука предоставляет разработчикам возможность реализовывать различные эффекты «не выходя из браузера». Например вот так:

var canvas = document.getElementById("cv"),
    ctx = canvas.getContext("2d");

ctx.invoke("getImageData", 0, 0, canvas.width, canvas.height, function(buf)
{
    for (var y = 0; y < canvas.height; y++)
    {
        for (var x = 0; x < canvas.width; x++)
        {
            var ofs = y * canvas.width + x,
                pixelValue = buf.data[ofs],
                red = pixelValue.charCodeAt(0),
                green = pixelValue.charCodeAt(1),
                blue = pixelValue.charCodeAt(2),
                alpha = pixelValue.charCodeAt(3);

            buf.data[ofs] = String.fromCharCode(red % 32, green % 64, blue % 128, alpha);
        }
    }
    ctx.invoke("putImageData", buf, 0, 0, function () {;
        // ... и распечатаем буфер по завершении операции
        console.log("Image data dump:" + buf);
        // Заметьте, Internet Explorer не отображает текст с символом \x00.
    });
});


И да, это работает достаточно медленно в Internet Explorer, в отличие от его конкурентов (хотя есть некоторое решение этой проблемы, оно будет добавлено в следующей версии).

Кстати, как вы наверно заметили, структура данных отличается от той, что заявлена в спецификации. Новый формат более эффективен по времени обработки и занимаемой памяти.

Точка в контуре?

В Internet Explorer метод isPointInPath(x, y) возвращает положительное значение если x, y находится в границах контура. В остальных браузерах — если внутри заливки контура.

Снимок холста

Можно получить через toDataURL():

var canvas = document.getElementById("cv");
var type = "image/jpg", quality = .4; // качество картинки - необязательный аргумент
canvas.toDataURL(type, quality, function (png_data) {
    // следущий код будет рисовать кусок холста на том же самом холсте
    var ctx = this.getContext("2d");
    this.onload = function (img) {
        ctx.drawImage(img, 0, 0, canvas.width - 100, 0, 100, 100);
    }
    this.loadImage(png_data);
});


Это похоже на вызов invoke, где возращаемое значение передается фунции-обработчику.
Тип картики может быть «image/jpeg» или «image/png» (по умолчанию).

Пример работы с картой пикселей и снимком холста.

Операции смешивания пикселей (composite operations)

В fxCanvas реализованы только source-over и lighter. Но в будущем будут добавлены остальные.

Скачать исходники можно здесь, посмотреть примеры и тесты здесь.

www.schetov.ru

Добрый день,

мы рады представить вам наш продукт. Его можно отнести к модному нынче течению — стартап. Я думаю в основе любого стартапа лежит ИДЕЯ. К этому мы подошли основательно. В нашей команде присутствовали люди разных сфер деятельности (дизайнер, программист, продавец компьютеров), что позволило взглянуть на систему с разных сторон. После довольно таки длительных обсуждений было составлено чёткое представление системы.

На днях открыл для себя Life with Playstation, но суть не в нем, а в фоновом процессе Folding@home. Проект распределённых вычислений для проведения компьютерной симуляции свёртывания молекул белка. Пока мы читаем новости, смотрим погоду наша PS3 производит вычисления для Folding@home.

И тут мне пришла идея, а почему бы не производить вычисления в браузере, пока пользователь работает на нашем сайте, ведь загрузка процесора при просмотре сайта минимальна.

Долго не мог придумать, что же такое можно вычислять распределенно, дабы материализировать идею… Рендерить 3D сцену — не оправдано для теста и затратно по передаваемым данным. Вспомнилась простая лабораторная работа из студентческих годов по КМФП — визуализация потенциала поля с несколькими зарядами. Предельно просто, можно вычислять распределенно.

Это продолжение темы про дерево. Хочу его довести до ранга «готов к внедрению». Потому повозился с Javascript и сделал запоминание выбранного узла на основе адреса ссылки.
Если ссылка вложена в поддерево, дерево развернется до её уровня и, если у неё самой есть поддерево — оно тоже будет развернуто.

Javascript сделал как смог, т.к. давно не использовал. Прошу помощи в доработке и оптимизации.

Привет, хочу представить одну интересную разработку студии, в которой я работаю. И как ведущий разработчик буду её освещать :)

Прочитал топик и решил реализовать на js (yass) + css.
Рабочий пример

Привет.
Решил я познакомится с технологией canvas и написал ардкадную игрушку.

Использовал для старта руководство.

Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов...

jQuery — это замечательный Javascript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение — лучше всего начинать с наглядных примеров, и они далее…

Гуглил я что-то по аяксу и наткнулся на некий линк. Захожу, ну там всё цивильно, описание, автор, листинг, комменты. И смотрю, вверху есть кнопочка "Translate". Ну, думаю, дай-ка на русском почитаю, выбираю русский, жму. Начинаю читать, и чувствую - что-то не то. Вчитался - и упал под стол =) JS\HTML переведён на русский, да как!

    н var = 'ж' + Мат. слово (скромный случайная () * 99999);
и так далее.

Полностью здесь.

После прочтения вы поймёте смысл названия ;)