Одной из самых притягательных возможностей HTML5 было и остается наделение JavaScript графическими возможностями. Не будем сейчас спорит о преимуществах такого способа создания графики и альтернативных путях решения той же проблемы (тех же SVG и Flash). Так случилось, что в рамках текущего проекта мой выбор пал именно на отрисовку с использованием JS.
Каким же образом осуществляется рисование в JS? Одним из элементов HTML5 является Canvas — элемент, предназначенный для создания графических изображений при помощи JavaScript.
Сразу скажу, что целью данной статьи является не обзор самого Canvas. О нем есть информация во многих хороших источниках.
Цель статьи — описать особенность обеспечения кроссбразуерности скрипта, генерирующего изображение для Canvas.
JavaScript-художников, не желающих потратить лишних 2-3 часа на отладку прошу под кат
С Canvas я работал над следующей задачей — отрисовка иерархического дерева баскетбольных игр. По сути, необходимо было отрисовать граф, вершины которого хранят информацию об игре (команды, рейтинги, очки), а связи позволяют проследить путь определенной команды — кто вышел в следующий этап из пары игроков.
Важной отметить, что Internet Explorer не поддерживает Canvas. Canvas на данный момент поддерживается Gecko и Opera 9.0+. В IE поддерживается VML (Vector Markup Language) — основанная на XML технология для двухмерного рисования. С определенной долей натяжки можно сказать, что возможности VML и Canvas аналогичны. И, к счастью, есть возможность не рисовать одно и тоже сначала на canvas (для нормальных браузеров), а потом на VML (для IE). Существует такая замечательная вещь, как Explorer Canvas, сокращенно exCanvas. Это фреймворк, который «учит» Explorer работать с canvas — реализует все основные методы canvas на VML. Теоретически, Вы можете написать свой скрипт на canvas, затем добавить ссылку на JS файл с
exCanvas и все будет работать. Посмотрим, как обстоят дела на практике.
Javascript-код для данной задачи был разработан. Началось тестирование. Существенных отличий в Opera, Chrome, FF, Safari выявлено не было. Что же IE? А в IE не работало ничего. exCanvas просто не создал нужный контекст двухмерного рисования. Свойство getContext('2d') объекта оставалось undefined.
Опустим поиски кто виноват и что делать. Результаты.
Для иллюстрации вышесказанного — три примера кода:
1. Фоновое изображение. exCanvas НЕ работает.
HTML
CSS
2. Обычное изображение. exCanvas НЕ работает.
3. Без графики на странице. exCanvas отрабатывает корректно.
HTML
CSS
На мой взгляд — это более чем удивительно. И лично мне подобное показалось практически невозможным. Сначала я предполагал, что это какие-то баги кода отрисовки, использование возможностей Canvas, которые не реализованы в exCanvas (а такие есть) и т.п. Но — нет. Действительно, использование фоновых изображений и обычных изображений на странице может привести ошибкам. И тому естьдокументальное подтверждение.
Итак, я не один такой, что не может не радовать. Но что же делать?
Решение из вышеописанного источника простое и очень талантливое — To check, just remove the background.
Но макет есть макет и совсем отказаться от графики на странице я не мог.
В данных условиях, когда использование background-image и невозможно, считаю единственным оптимальным способом вывода графики использование дополнительных канвасов. Мне пришлось использовать два — для футера и хидера.
Код вставки изображения в canvas прост
Или, не используя jQuery
Таким образом, была решена проблему вывода дополнительной графики в документах с Canvas.
Надеюсь, данная информация будет кому-то полезна.
Каким же образом осуществляется рисование в JS? Одним из элементов HTML5 является Canvas — элемент, предназначенный для создания графических изображений при помощи JavaScript.
Сразу скажу, что целью данной статьи является не обзор самого Canvas. О нем есть информация во многих хороших источниках.
Цель статьи — описать особенность обеспечения кроссбразуерности скрипта, генерирующего изображение для Canvas.
JavaScript-художников, не желающих потратить лишних 2-3 часа на отладку прошу под кат
Задача
С Canvas я работал над следующей задачей — отрисовка иерархического дерева баскетбольных игр. По сути, необходимо было отрисовать граф, вершины которого хранят информацию об игре (команды, рейтинги, очки), а связи позволяют проследить путь определенной команды — кто вышел в следующий этап из пары игроков.
Особенно реализации для IE.
Важной отметить, что Internet Explorer не поддерживает Canvas. Canvas на данный момент поддерживается Gecko и Opera 9.0+. В IE поддерживается VML (Vector Markup Language) — основанная на XML технология для двухмерного рисования. С определенной долей натяжки можно сказать, что возможности VML и Canvas аналогичны. И, к счастью, есть возможность не рисовать одно и тоже сначала на canvas (для нормальных браузеров), а потом на VML (для IE). Существует такая замечательная вещь, как Explorer Canvas, сокращенно exCanvas. Это фреймворк, который «учит» Explorer работать с canvas — реализует все основные методы canvas на VML. Теоретически, Вы можете написать свой скрипт на canvas, затем добавить ссылку на JS файл с
exCanvas и все будет работать. Посмотрим, как обстоят дела на практике.
Тестирование
Javascript-код для данной задачи был разработан. Началось тестирование. Существенных отличий в Opera, Chrome, FF, Safari выявлено не было. Что же IE? А в IE не работало ничего. exCanvas просто не создал нужный контекст двухмерного рисования. Свойство getContext('2d') объекта оставалось undefined.
Опустим поиски кто виноват и что делать. Результаты.
- Проблема не зависят от JS кода для рисования
- Некоторые элементы мешают корректной работе exCanvas
- Некоторые возможности разметки тоже мешают корректной работе exCanvas
Для иллюстрации вышесказанного — три примера кода:
1. Фоновое изображение. exCanvas НЕ работает.
HTML
CSS
#teamRegistration
{
padding: 1px;
background-image: url("../../images/barBackground.jpg");
background-repeat: repeat-x;
height: 52px;
margin: 0;
position: relative;
}
2. Обычное изображение. exCanvas НЕ работает.
3. Без графики на странице. exCanvas отрабатывает корректно.
HTML
CSS
#teamRegistration
{
padding: 1px;
/* background-image: url("../../images/barBackground.jpg");*/
background-repeat: repeat-x;
height: 52px;
margin: 0;
position: relative;
}
На мой взгляд — это более чем удивительно. И лично мне подобное показалось практически невозможным. Сначала я предполагал, что это какие-то баги кода отрисовки, использование возможностей Canvas, которые не реализованы в exCanvas (а такие есть) и т.п. Но — нет. Действительно, использование фоновых изображений и обычных изображений на странице может привести ошибкам. И тому естьдокументальное подтверждение.
Итак, я не один такой, что не может не радовать. Но что же делать?
Решение из вышеописанного источника простое и очень талантливое — To check, just remove the background.
Но макет есть макет и совсем отказаться от графики на странице я не мог.
Решение
В данных условиях, когда использование background-image и невозможно, считаю единственным оптимальным способом вывода графики использование дополнительных канвасов. Мне пришлось использовать два — для футера и хидера.
Код вставки изображения в canvas прост
$(document).ready(function() {
var canvas = document.getElementById('bottom');
var ctx = canvas.getContext('2d');
var img = new Image(); // Create new Image object
img.src = 'images/gradientLine3.jpg'; // Set source path
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
});
Или, не используя jQuery
window.onload=function(){...}
Таким образом, была решена проблему вывода дополнительной графики в документах с Canvas.
Надеюсь, данная информация будет кому-то полезна.