🧰 EaselJS · Estudio ← Índice Qué es Características Casos de uso Script Casos reales Referencia

Estudio de EaselJS

Gráficos y Animación ⭐ 8k stars
API fácil para canvas de HTML5 (CreateJS): gráficos, texto, imágenes.

🤖 Skill de implementación: frontend-desarrollo (regla: solo catálogo de las 66 · versiones por ERR/MEJ)

1 · Características

2 · Casos de uso

3 · Script minimalista

Instalación: npm i @createjs/easeljs (o CDN)

import { Stage, Shape } from '@createjs/easeljs';
const s = new Stage('canvas');
const c = new Shape();
c.graphics.beginFill('orange').drawCircle(50, 50, 30);
s.addChild(c);
s.update();

4 · Casos de uso (implementación real)

Dos casos de uso comunes implementados con esta librería.

1. Shape con ticker

Anima una forma con el ticker.

import { Stage, Shape, Ticker } from '@createjs/easeljs';

const s = new Stage('canvas');
const c = new Shape();
c.graphics.beginFill('orange').drawCircle(0, 0, 30);
c.x = 40; s.addChild(c);

Ticker.on('tick', () => { c.x += 2; if (c.x > 360) c.x = 40; s.update(); });
🔁 Cómo funciona: `Ticker` dispara por frame; se mueve la forma y `s.update()` redibuja el stage.

2. Click en una forma

Detecta el clic sobre un shape.

import { Stage, Shape } from '@createjs/easeljs';

const s = new Stage('canvas');
const c = new Shape();
c.graphics.beginFill('#3399ff').drawRect(50, 50, 100, 60);
c.on('click', () => console.log('¡Clic en la caja!'));
s.addChild(c); s.update();
🔁 Cómo funciona: Los objetos del stage emiten eventos; `on('click')` los escucha.

5 · Referencia

CategoríaGráficos y Animación
Stars (GitHub)⭐ 8k
Sitio oficialhttps://createjs.com/easeljs
GitHubhttps://github.com/CreateJS/EaselJS
Instalaciónnpm i @createjs/easeljs (o CDN)
RelacionadasFabric.js · Paper.js · Konva.js
📦 Regla de librerías (local primero): revisar C:\Users\TUF\Documents\librerías\local\ antes de descargar. Volver al índice de los 66 estudios.