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

Полное руководство по использованию декларативного фреймворка для создания интерактивного контента на HTML5 Canvas.

Что такое framework?

framework — это минималистичный декларативный фреймворк для создания интерактивного контента на HTML5 Canvas с помощью простого и интуитивного синтаксиса.

Простой синтаксис для рисования фигур и текста
Поддержка переменных и выражений
Интерактивность (мышь, клавиатура)
Анимации и таймеры
Загрузка изображений и звука
Модульная система
Живое редактирование через API

Установка

Добавьте скрипт framework в ваш HTML файл:

<!-- Стандартная версия с обработкой ошибок -->
<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>

ℹ️ Совет: Используйте стандартную версию для разработки (лучшая отладка) и s-framework для продакшена (больше скорости).

Доступные версии

Версия	Тип	URL
1.0	Стандарт	`framework.itrypro.ru/api/framework@1.0/framework.js`
1.5	Стандарт	`framework.itrypro.ru/api/framework@1.5/framework.js`
2.1	Стандарт	`framework.itrypro.ru/api/framework@2.1/framework.js`
2.5	Стандарт (рекомендуется)	`framework.itrypro.ru/api/framework@2.5/framework.js`
2.7	Стандарт (рекомендуется)	`framework.itrypro.ru/api/framework@2.7/framework.js`
2.1 s	Легкая версия	`framework.itrypro.ru/api/framework@2.1/s-framework.js`
2.5 s	Легкая версия	`framework.itrypro.ru/api/framework@2.5/s-framework.js`

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

Создайте ваш первый canvas за 2 минуты:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Canvas</title>
  <style>
    body { margin: 0; background: #0f172a; }
  </style>
</head>
<body>
  <framework>
config.title "Мой первый холст"
draw.rect 0 0 600 600 #1e293b
draw.circle 300 300 100 #00d9ff
draw.text "Hello Framework!" 300 300 #ffffff 36px sans-serif
  </framework>

  <script src="https://framework.itrypro.ru/api/framework@2.7/framework.js"></script>
</body>
</html>

✓ Готово! Откройте файл в браузере и увидите ваш первый canvas.

Синтаксис

framework использует простой декларативный синтаксис, похожий на конфигурационные файлы.

Базовая структура

Каждая команда находится на отдельной строке и состоит из имени команды и параметров:

команда параметр1 параметр2 параметр3

Типы значений

Тип	Пример	Описание
Число	`300`	Целые числа и числа с плавающей точкой
Цвет (hex)	`#00d9ff`	Hex цвет или сокращение rgb
Строка	`"Hello World"`	Текст в двойных кавычках
Размер	`32px`	Размер с единицей измерения
Переменная	`myVar`	Ранее определенная переменная

Переменные

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

// Определение переменных
color = #00d9ff
size = 32px
x = 300
y = 300
radius = 50

// Использование переменных
draw.circle x y radius color
draw.text "Text" x y color size sans-serif

Выражения

Вы можете использовать математические выражения:

// Арифметические операции
x = 150 + 150
y = 600 - 300
size = 16 * 2

// Использование встроенных функций Math
angle = Math.sin(t) * 100
radius = Math.cos(time / 1000) * 50

Специальные переменные

Framework предоставляет специальные переменные в блоках анимации:

time — прошедшее время в миллисекундах
t — время в секундах (t = time / 1000)
mouseX — координата мыши по X
mouseY — координата мыши по Y

Команды рисования

draw.rect

Рисует прямоугольник на канвасе.

draw.rect x y width height [color]

Параметры:

x — координата по горизонтали (пиксели)
y — координата по вертикали (пиксели)
width — ширина прямоугольника
height — высота прямоугольника
color — цвет (опционально, по умолчанию #1e293b)

Пример:

draw.rect 50 50 500 500 #00d9ff
draw.rect 100 100 400 400
// Цвет по умолчанию

draw.circle

Рисует круг на канвасе.

draw.circle x y radius [color]

Параметры:

x — координата центра по X
y — координата центра по Y
radius — радиус круга
color — цвет (опционально, по умолчанию #64748b)

Пример:

draw.circle 300 300 100 #00d9ff
draw.circle 300 300 50 #6633ff
draw.circle 200 200 30 #ff6b6b

draw.text

Рисует текст на канвасе.

draw.text "текст" x y color [size] [font]

Параметры:

текст — текст для рисования (в двойных кавычках)
x — координата по X (центр текста)
y — координата по Y (центр текста)
color — цвет текста
size — размер текста (опционально, по умолчанию 40px)
font — название шрифта (опционально, по умолчанию sans-serif)

Пример:

draw.text "Hello" 300 300 #ffffff 48px sans-serif
draw.text "Framework" 300 400 #00d9ff 32px
draw.text "Default size" 300 500 #94a3b8

Работа с изображениями

image.add

Загружает изображение для использования.

image.add id url

Параметры:

id — идентификатор изображения для последующего использования
url — URL изображения

Пример:

image.add myimg https://example.com/image.png
image.add logo https://cdn.example.com/logo.svg

image.draw

Рисует загруженное изображение.

image.draw id x y [width] [height]

Параметры:

id — идентификатор загруженного изображения
x — координата по X (верхний левый угол)
y — координата по Y (верхний левый угол)
width — ширина (опционально, оригинальная ширина по умолчанию)
height — высота (опционально, оригинальная высота по умолчанию)

Пример:

image.add pic https://example.com/pic.png
image.draw pic 0 0 600 600
image.draw pic 100 100 400 400

Работа со звуком

sound.load

Загружает звуковой файл.

sound.load id url

Параметры:

id — идентификатор звука
url — URL файла (mp3, wav, ogg)

sound.play

Воспроизводит загруженный звук.

sound.play id

Пример:

sound.load click https://example.com/click.mp3
sound.play click // Воспроизвести звук

Команды управления

config.title

Устанавливает заголовок холста.

config.title "название"

Пример:

config.title "Мой интерактивный холст"

if / else

Условное выполнение команд.

if condition
  команда1
else
  команда2

Поддерживаемые операторы:

== — равно
!= — не равно
< — меньше
> — больше
<= — меньше или равно
>= — больше или равно

Пример:

x = 300
if x == 300
  draw.circle x 300 50 #00d9ff
else
  draw.circle x 300 50 #6633ff

layer

Выбирает слой для рисования.

layer background | scene | ui

Слои:

background — фоновый слой (снизу)
scene — основной слой (по умолчанию)
ui — слой интерфейса (сверху)

import

Импортирует внешний модуль.

import module.frame.work

Анимация

animate.start / animate.end

Блок кода, который выполняется каждый кадр анимации.

animate.start
  команды рисования
animate.end

Описание:

Весь код между animate.start и animate.end будет выполняться ~60 раз в секунду. Холст очищается перед каждым кадром.

Пример простой анимации:

config.title "Анимированный круг"

animate.start
  draw.rect 0 0 600 600 #1e293b
  
  // Используем специальную переменную 't' (время в секундах)
  x = 300 + Math.sin(t) * 100
  y = 300 + Math.cos(t) * 100
  
  draw.circle x y 50 #00d9ff
animate.end

Пример с пользовательским вводом:

animate.start
  draw.rect 0 0 600 600 #0f172a
  draw.circle mouseX mouseY 50 #00d9ff
  draw.text "X:" mouseX 30 #ffffff 16px
animate.end

Ввод пользователя

В блоках анимации доступны переменные для отслеживания пользовательского ввода:

Мышь

mouseX — координата мыши по X (0-600)
mouseY — координата мыши по Y (0-600)

Клавиатура

Используйте объект input.keys для отслеживания нажатий клавиш:

animate.start
  draw.rect 0 0 600 600 #1e293b
  
  if input.keys["ArrowUp"]
    y = y - 10
  if input.keys["ArrowDown"]
    y = y + 10
    
  draw.circle 300 y 50 #00d9ff
animate.end

Клики мыши

Массив input.clicks содержит координаты последних кликов:

animate.start
  draw.rect 0 0 600 600 #1e293b
  
  if input.clicks.length > 0
    lastClick = input.clicks[input.clicks.length - 1]
    draw.circle lastClick.x lastClick.y 30 #ff6b6b
animate.end

Слои

Используйте слои для организации контента по глубине:

// Фоновый слой
layer background
draw.rect 0 0 600 600 #0f172a

// Основной слой (по умолчанию)
layer scene
draw.circle 300 300 100 #00d9ff

// Слой интерфейса (сверху)
layer ui
draw.text "Score: 100" 50 50 #ffffff 24px

Таймеры

after

Выполняет команду через определенное время.

after milliseconds do команда

Пример:

after 2000 do draw.text "2 секунды прошло" 300 300 #00d9ff 32px

every

Выполняет команду повторно через интервал.

every milliseconds do команда

Пример:

every 1000 do sound.play click

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

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

Создание модуля (utility.frame.work)

// Рисует сетку
grid_size = 50
grid_color = #333333

x = 0
while x < 600
  draw.rect x 0 1 600 grid_color
  x = x + grid_size

Использование модуля

import utility.frame.work

draw.rect 0 0 600 600 #1e293b
draw.circle 300 300 100 #00d9ff

JavaScript API

Управляйте framework кодом через JavaScript API:

framework.auth(password)

Авторизуйтесь для редактирования кода.

framework.auth('mypassword');

framework.addLine(code)

Добавляет строку кода.

framework.addLine('draw.rect 100 100 200 200 #00d9ff');

framework.setLine(n, code)

Изменяет строку кода (1-индексированная).

framework.setLine(1, 'draw.circle 300 300 100 #ff6b6b');

framework.run()

Запускает текущий код.

framework.run();

framework.logging(enabled) - только s-framework

Включает/отключает логирование в консоль.

framework.logging(false); // Отключить логи
framework.logging(true);  // Включить логи

Аутентификация

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

<framework>
pass.mySecretPassword
config.title "Protected Canvas"
draw.rect 0 0 600 600 #1e293b
</framework>

<script>
// В консоли браузера:
framework.auth('mySecretPassword');
framework.addLine('draw.circle 300 300 100 #00d9ff');
framework.run();
</script>

⚠️ Важно: Пароли видны в исходном коде страницы! Используйте их только для базовой защиты от случайного редактирования.

Полные примеры

Интерактивная рисовалка

<framework>
config.title "Interactive Drawing"

animate.start
  draw.rect 0 0 600 600 #0f172a
  
  if input.clicks.length > 0
    lastClick = input.clicks[input.clicks.length - 1]
    draw.circle lastClick.x lastClick.y 20 #00d9ff
    
  draw.text "Click to draw" 300 30 #94a3b8 16px
animate.end
</framework>

Орбитальная система

<framework>
config.title "Orbital System"

animate.start
  draw.rect 0 0 600 600 #0f172a
  
  // Звезда в центре
  draw.circle 300 300 30 #ffff00
  
  // Планета 1
  x1 = 300 + Math.cos(t) * 100
  y1 = 300 + Math.sin(t) * 100
  draw.circle x1 y1 15 #0099ff
  
  // Планета 2
  x2 = 300 + Math.cos(t * 0.5) * 150
  y2 = 300 + Math.sin(t * 0.5) * 150
  draw.circle x2 y2 20 #ff6b6b
animate.end
</framework>

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

Что такое framework?

Установка

Доступные версии

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

Синтаксис

Базовая структура

Типы значений

Переменные

Выражения

Специальные переменные

Комментарии

Команды рисования

Параметры:

Пример:

Параметры:

Пример:

Параметры:

Пример:

Работа с изображениями

Параметры:

Пример:

Параметры:

Пример:

Работа со звуком

Параметры:

Пример:

Команды управления

Пример:

Поддерживаемые операторы:

Пример:

Слои:

Анимация

Описание:

Пример простой анимации:

Пример с пользовательским вводом:

Ввод пользователя

Мышь

Клавиатура

Клики мыши

Слои

Таймеры

Пример:

Пример:

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

Создание модуля (utility.frame.work)

Использование модуля

JavaScript API

Аутентификация

Полные примеры

Интерактивная рисовалка

Орбитальная система