無料GitHub で公開

example-canvas

Patterns for using Helios with Vanilla Canvas API. Use when building high-performance 2D/3D animations without frameworks.

日本語の概要は準備中です。原文の説明を表示しています。

BintzGavin/heliosスター 123(GitHub 123 + cccskills 0)

実行スコア未検証

インストール方法を見る

含まれるファイル（1）

SKILL.md1.7 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Vanilla Canvas Patterns

Use Helios directly with the HTML5 Canvas API. This provides the lowest overhead and highest performance.

Quick Start

1. HTML Setup

<!-- composition.html -->
<canvas id="canvas"></canvas>
<script type="module" src="./main.js"></script>

2. Logic Setup

// main.js
import { Helios } from '@helios-project/core';

// Setup
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = 1920;
const height = 1080;

canvas.width = width;
canvas.height = height;

// Initialize Helios
const helios = new Helios({
  duration: 5,
  fps: 60
});
helios.bindToDocumentTimeline();
window.helios = helios;

// Draw Function
function draw(frame) {
  // Clear
  ctx.clearRect(0, 0, width, height);

  // Calculate state
  const time = frame / helios.fps;
  const t = time / helios.duration; // 0..1

  // Draw
  const x = t * (width - 100);
  ctx.fillStyle = 'tomato';
  ctx.fillRect(x, height / 2 - 50, 100, 100);
}

// Subscribe
helios.subscribe((state) => {
  draw(state.currentFrame);
});

// Initial Render
draw(0);

Performance Tips

Pre-calculate values: Do heavy math (like sine tables or physics simulations) upfront if possible.
OffscreenCanvas: For very complex scenes, consider rendering in a Web Worker using OffscreenCanvas to keep the main thread free.
Batch Draw Calls: Minimize context state changes (fillStyle, strokeStyle, etc).

Source Files

Example: examples/simple-canvas-animation/

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

同じリポジトリのスキル

animated-video-philosophy

無料

Story-first motion design philosophy for animated video: motion must earn its place; arc (establish, complicate, resolve); show vs tell; shots as units of thought; quiet vs loud motion; Disney principles with restraint; timing heuristics; composition; grammar by medium (product demos, logos, data viz, explainers); technical commitments (deterministic time, scrubbability, refs); cutting discipline; explicit anti-patterns. Use when planning, storyboarding, critiquing, or implementing programmatic or motion-driven video (Helios, Remotion, explainers, loops, UI capture, logo reveals), or when the user asks for motion direction, pacing, or visual-story structure.

日本語の概要は準備中です。原文の説明を表示しています。