Яндекс.Метрика

    Ни о чём

    fxCanvas 0.1a — релиз «эмулятора» тега Canvas для Internet Explorer

    fxcanvas

    Вышла первая стабильная версия «эмулятора» тега 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. Но в будущем будут добавлены остальные.

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