f
framework
✨ Простой, мощный и минималистичный

framework

Декларативный фреймворк для создания
интерактивного контента на HTML5 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
Рекомендуется

framework 2.7

Исправлен canvas и оптимизирована работа

framework.itrypro.ru/api/framework@2.7/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 ошибок для максимальной скорости.

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

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

<framework> config.title "Hello" draw.rect 0 0 600 600 #0f172a draw.text "Hello" 300 300 #00d9ff 64px </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> bg = #1e293b color = #00d9ff draw.rect 0 0 600 600 bg draw.text "Framework" 300 300 color 48px </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>

Простая анимация

<framework> animate.start draw.rect 0 0 600 600 #0f172a x = 300 + Math.sin(t) * 100 draw.circle x 300 50 #00d9ff animate.end </framework>

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

<framework> animate.start draw.rect 0 0 600 600 #0f172a draw.circle mouseX mouseY 30 #00d9ff animate.end </framework>

📖 Быстрый старт

1. Подключение

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

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

<!-- ИЛИ легкая версия для максимальной скорости -->
<script src="https://framework.itrypro.ru/api/framework@2.5/s-framework.js"></script>

2. Создание холста

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

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

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

  • draw.rect x y width height color — рисует прямоугольник
  • draw.circle x y radius color — рисует круг
  • draw.text "текст" x y color size font — рисует текст
  • config.title "название" — устанавливает заголовок
  • animate.start ... animate.end — анимация

4. Переменные и выражения

// Определяйте переменные
color = #00d9ff
x = 300
y = 300

// Используйте выражения
size = 16 * 2
radius = 50 + 25
angle = Math.sin(t) * 100

// Используйте в командах
draw.circle x y radius color
draw.text "Text" x y color size sans-serif

5. Анимация и интерактивность

<framework>
animate.start
  draw.rect 0 0 600 600 #0f172a
  
  // Специальная переменная 't' (время в секундах)
  x = 300 + Math.sin(t) * 100
  y = 300 + Math.cos(t) * 100
  
  // Переменные мыши
  draw.circle x y 50 #00d9ff
  draw.circle mouseX mouseY 30 #ff6b6b
animate.end
</framework>
animate.start draw.rect 0 0 600 600 #0f172a // Специальная переменная 't' (время в секундах) x = 300 + Math.sin(t) * 100 y = 300 + Math.cos(t) * 100 // Переменные мыши draw.circle x y 50 #00d9ff draw.circle mouseX mouseY 30 #ff6b6b animate.end

📚 Полную документацию найдете в docs.html