framework - Декларативный фреймворк для Canvas

📦 Версии фреймворка

Стандартные версии

Стандарт

framework 1.0

Базовая версия с основными командами

framework.itrypro.ru/api/framework@1.0/framework.js

Стандарт

framework 1.5

Добавлены переменные и условия

framework.itrypro.ru/api/framework@1.5/framework.js

Рекомендуется

framework 2.1

Оптимизация

framework.itrypro.ru/api/framework@2.1/framework.js

Последняя

framework 2.5

Полная поддержка input, звука и таймеров

framework.itrypro.ru/api/framework@2.5/framework.js

⚡ Легкие версии (s-framework):
Если вам нужна максимальная скорость, используйте легкие версии без обработки ошибок и UI ошибок:

Легкая

s-framework 2.1

Без ошибок UI, только консоль

framework.itrypro.ru/api/framework@2.1/s-framework.js

Легкая

s-framework 2.5

Самая быстрая версия с логированием

framework.itrypro.ru/api/framework@2.5/s-framework.js

✨ Почему framework?

⚡

Простой синтаксис

Минималистичный и интуитивный синтаксис, который легко освоить за несколько минут.

🎨

Canvas-рендеринг

Мощный рендеринг на Canvas с поддержкой текста, фигур, изображений и анимаций.

📦

Модульная система

Импортируйте модули и переиспользуйте код с расширением .frame.work.

⚙️

Живое редактирование

Изменяйте код на лету с помощью API и видьте результаты в реальном времени.

🎯

Интерактивность

Поддержка мыши, клавиатуры и сенсорного ввода для интерактивных приложений.

🚀

Производительность

Легкая версия s-framework без UI ошибок для максимальной скорости.

📖 Документация

Установка

Добавьте скрипт в ваш HTML файл перед закрывающим тегом </body>:

<!-- Стандартная версия с обработкой ошибок -->
<script src="https://framework.itrypro.ru/api/framework@2.5/framework.js"></script>

<!-- ИЛИ легкая версия без ошибок UI -->
<script src="https://framework.itrypro.ru/api/framework@2.5/s-framework.js"></script>

Базовое использование

Оберните ваш код в элемент <framework>:

<framework>
config.title "Мой холст"
draw.rect 0 0 600 600 #1e293b
draw.text "Hello World" 300 300 #ffffff 48px sans-serif
</framework>

Основные команды

Команда	Описание	Пример
`draw.text`	Рисует текст на канвасе	`draw.text "Привет" 300 300 #fff 32px sans-serif`
`draw.rect`	Рисует прямоугольник	`draw.rect 10 10 100 100 #00d9ff`
`draw.circle`	Рисует круг	`draw.circle 300 300 50 #6633ff`
`config.title`	Устанавливает заголовок	`config.title "Мой холст"`
`image.add`	Добавляет изображение	`image.add myimg https://example.com/img.png`
`image.draw`	Рисует изображение	`image.draw myimg 0 0 200 200`
`import`	Импортирует модуль	`import module.frame.work`
`animate.start/end`	Блок анимации	`animate.start ... animate.end`

Переменные

Определяйте переменные для переиспользования значений:

color = #00d9ff
size = 32px
x = 300
y = 300
draw.text "Текст" x y color size sans-serif

API и управление кодом

Используйте API для управления кодом в реальном времени:

<framework id="canvas">
pass.mypassword
config.title "Интерактивный холст"
</framework>

<script>
// Авторизуйтесь
framework.auth('mypassword');

// Добавьте новую строку
framework.addLine('draw.rect 100 100 200 200 #00d9ff');

// Измените существующую строку
framework.setLine(1, 'draw.text "Привет" 300 300 #fff 48px');

// Запустите код
framework.run();

// Для s-framework управляйте логированием
framework.logging(false); // Отключить логи
framework.logging(true);  // Включить логи
</script>

🎯 Примеры кода

Интерактивный холст

config.title "Интерактивный пример" pass.demo123

Простой текст

<framework>
draw.rect 0 0 600 600 #0f172a
draw.text "Hello" 300 300 #00d9ff 64px sans-serif
</framework>

Фигуры и цвета

<framework>
draw.rect 50 50 500 500 #1e293b
draw.circle 300 300 100 #00d9ff
draw.circle 300 300 50 #6633ff
draw.rect 250 250 100 100 #ff6b6b
</framework>

Использование переменных

<framework>
config.title "Canvas с переменными"
bg = #1e293b
color = #00d9ff
size = 48px
draw.rect 0 0 600 600 bg
draw.text "Framework" 300 300 color size sans-serif
</framework>

Вычисления в коде

<framework>
x = 300
y = 300
r = 50
draw.circle x y r #00d9ff
draw.circle (x + 100) y r #0099ff
draw.circle (x - 100) y r #6633ff
</framework>