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

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

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

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

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

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

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

var canvas = document.getElementById("cv"),<br>
    ctx = canvas.getContext("2d");<br>
<br>
ctx.setFillStyle("#ff0")<br>
    .setStrokeStyle("#0ff")<br>
    .strokeRect(10, 20, 30, 30)<br>
    .fillRect(30, 40, 50, 50)<br>
    .invoke("getImageData", 0, 0, canvas.width, canvas.height, function (imageData) {<br>
        // ... imageData - возвращаемые данные getImageData<br>
    });<br>


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

Картинки

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

var canvas = document.getElementById("cv"),<br>
    ctx = canvas.getContext("2d"),<br>
    image_src = "sample.jpg";<br>
<br>
canvas.onload = function(img) {<br>
    if (img.src.indexOf(image_src) > -1) {<br>
        ctx.drawImage(img, 10, 10);<br>
    }<br>
}<br>
canvas.loadImage(image_src);<br>


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

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

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

var canvas = document.getElementById("cv"),<br>
    ctx = canvas.getContext("2d");<br>
<br>
ctx.invoke("getImageData", 0, 0, canvas.width, canvas.height, function(buf)<br>
{<br>
    for (var y = 0; y < canvas.height; y++)<br>
    {<br>
        for (var x = 0; x < canvas.width; x++)<br>
        {<br>
            var ofs = y * canvas.width + x,<br>
                pixelValue = buf.data[ofs],<br>
                red = pixelValue.charCodeAt(0),<br>
                green = pixelValue.charCodeAt(1),<br>
                blue = pixelValue.charCodeAt(2),<br>
                alpha = pixelValue.charCodeAt(3);<br>
<br>
            buf.data[ofs] = String.fromCharCode(red % 32, green % 64, blue % 128, alpha);<br>
        }<br>
    }<br>
    ctx.invoke("putImageData", buf, 0, 0, function () {;<br>
        // ... и распечатаем буфер по завершении операции<br>
        console.log("Image data dump:" + buf);<br>
        // Заметьте, Internet Explorer не отображает текст с символом \x00.<br>
    });<br>
});<br>


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

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

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

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

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

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

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


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

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

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

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

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