MooTools Canvas (або коротко MooCanvas) — клас, розроблений Olmo Maldonado на основі MooTools версії 1.12, для додавання підтримки канви (полотна) в Internet Explorer’і. Завдячуючи використанню MooTools, клас вийшов модульним та має відносно невеликий розмір. Дане програмне забезпечення поширюється під MIT License.

MooTools Canvas не виник з пустого місця. Він є «побічний» (якщо так можна виразитись) продукт ExCanvas від Google та скрипту від Ralph Sommerer (Коротка довідка: Ralph Sommerer був першою особою, яка почала працювати над ідеєю використання VML для емуляції тегу <canvas>). Саме емуляцією теґу <canvas> для ІЕ за допомогою створення VML елемента на льоту і займається MooTools Canvas.

Завантажити MooTools Canvas, а також подивитися на нього в дії, можна на сторінці проекту: http://ibolmo.com/projects/moocanvas/.

Повна версія MooTools Canvas, яка включає розширені коментарі до коду, тобто файл «moocanvas.js» займає 29,7 Кб, а стиснута без коментарів  — 7,12 Кб.

Навіщо вам MooTools Canvas?

Для початку давайте вияснимо навіщо потрібен MooTools Canvas.

При створенні сучасних веб-сайтів інколи виникає потреба у використанні теґа <canvas> для малювання в браузері графіків, фото композицій, для створення простенької (і не дуже простенької) анімації, програмним способом (зазвичай реалізовано на JavaScript).

Цей теґ вперше ввела компанія Apple для панелі керування в ОС Mac X, а пізніше в своєму браузері Safari. Зараз браузери на Gecko-основі такі, як Firefox 1.5, Opera (в якості експерименту) також підтримують цей новий елемент.

Тому <canvas> поступово входить в ужиток веб-розробників, як інструмент, який дозволяє створювати 2D графіку за допомогою JavaScript. Єдине, що стримує його поширення, це відсутність підтримки з боку Internet Explorer. Саме для вирішенню цієї проблеми і потрібен клас MooTools Canvas.

Синтаксис

Синтаксис:

var myCanvas = new Canvas([el,][ props]);

Аргументи:

• el - (об’єкт, необов’язковий) Елемент, який розширюється, якщо необхідно.
• props - (об’єкт, необов’язковий) Властивості елемента.

Повертає (результат): новий елемент полотна, розширений getContext, якщо є така потреба.

Приклад:

var myCanvas = new Canvas();
var ctx = myCanvas.getContext('2d');
$(document.body).adopt(myCanvas);

Використання MooTools Canvas

Попри певну схожість MooCanvas та ExCanvas, між ними є одна суттєва різниця, яку варто пояснити. Відмінність полягає в тому, що Excanvas автоматично пробуватиме розширити всі теґи <canvas>, що є на сторінці, за допомогою getContext методу. Тоді ж як в MooCanvas підхід інший — вам необхідно після підключення бібліотеки створити екземпляр класу Canvas і вставити його у потрібному місці в DOM. Це можна зробити наприклад, ось, так (звичайно до цього фрагменту коду вже мають бути підключені MooTools та MooCanvas):

window.onload = function() {

	var myCanvas = new Canvas({
		// унікальний ідентифікатор полотна
		id: 'myCanvasId',
		width: 300, // ширина полотна
		height: 250 // висота полотна
	});

	// тепер ви маєте вибрати, що хочете робити з цим елементом,
	// наприклад, вставляємо його в тіло документу:
	myCanvas.inject(document.body);

}

Компоненти MooTools Canvas

При завантаженні MooTools Canvas ви можете обрати, компоненти, які вам потрібні для подальшої роботи:

• Canvas — додає елемент канви з getContext, якщо браузер є IE;
• Paths
• Rectangles — створення прямокутних форм;
• Transforms
• Image — додає можливість розміщувати зображення на полотні;
• State
• Gradient — додає мінімальну підтримку градієнтів;
• Pattern — додає мінімальну підтримки шаблонів (зразків).

Проблеми

Навіть після ретельних випробувань все ще є деякі проблеми, які не були вирішені. Не те, що їх не можна вирішити, просто, як часто буває, в розробника бракує часу або ж не має можливості дослідити всі можливі випадки. Тому вразі, якщо ви виявили помилки, надсилайте їх розробнику.

Післяслово

Дана стаття не претендує на повноту викладу, її можна розглядати лише як вступ у вивчення MooTools Canvas.

Джерела:

• http://ibolmo.com/projects/moocanvas/ — Web-сторінка проекту (англійською мовою).
• http://habrahabr.ru/blogs/webdev/19726/ (російською мовою).