メインコンテンツまでスキップ

components/AnimationCanvas

Interfaces

AbsoluteSizingProps

Defined in: components/AnimationCanvas/index.tsx:56

Properties

height?
optional height?: number;

Defined in: components/AnimationCanvas/index.tsx:58

width?
optional width?: number;

Defined in: components/AnimationCanvas/index.tsx:57


CommonProps

Defined in: components/AnimationCanvas/index.tsx:46

Properties

animate?
optional animate?: boolean;

Defined in: components/AnimationCanvas/index.tsx:49

draw
draw: DrawFunction;

Defined in: components/AnimationCanvas/index.tsx:47

init?
optional init?: InitFunction;

Defined in: components/AnimationCanvas/index.tsx:48

options?
optional options?: CanvasRenderingContext2DSettings;

Defined in: components/AnimationCanvas/index.tsx:53

See

https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext#contextattributes


RelativeSizingProps

Defined in: components/AnimationCanvas/index.tsx:61

Properties

reduceFlickering?
optional reduceFlickering?: boolean;

Defined in: components/AnimationCanvas/index.tsx:63

relativeSize?
optional relativeSize?: boolean;

Defined in: components/AnimationCanvas/index.tsx:62

Type Aliases

AnimationCanvasProps

type AnimationCanvasProps = CommonProps & AbsoluteSizingProps & RelativeSizingProps;

Defined in: components/AnimationCanvas/index.tsx:66


DrawFunction

type DrawFunction = (context, option) => void;

Defined in: components/AnimationCanvas/index.tsx:28

Parameters

ParameterTypeDescription
contextCanvasRenderingContext2D-
option{ count: number; deltaTime: number; elapsedTime: number; fps: number; height: number; width: number; }-
option.countnumberframe count
option.deltaTimenumberdelta time (ms)
option.elapsedTimenumberelapsed time (ms)
option.fpsnumberframe per second
option.heightnumbercurrent canvas height
option.widthnumbercurrent canvas width

Returns

void


InitFunction

type InitFunction = (context, option) => void;

Defined in: components/AnimationCanvas/index.tsx:18

Parameters

ParameterTypeDescription
contextCanvasRenderingContext2D-
option{ height: number; width: number; }-
option.heightnumbercurrent canvas height
option.widthnumbercurrent canvas width

Returns

void

Functions

AnimationCanvas()

Call Signature

function AnimationCanvas(props): ReactElement;

Defined in: components/AnimationCanvas/index.tsx:73

A simple animatable canvas with requestAnimationFrame()

Parameters
ParameterType
propsCommonProps & AbsoluteSizingProps & Omit<Omit<DetailedHTMLProps<CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, "ref">, keyof CommonProps | keyof AbsoluteSizingProps | keyof RelativeSizingProps>
Returns

ReactElement

Call Signature

function AnimationCanvas(pros): ReactElement;

Defined in: components/AnimationCanvas/index.tsx:78

A simple animatable canvas with requestAnimationFrame()

Parameters
ParameterType
prosCommonProps & RelativeSizingProps & Omit<Omit<DetailedHTMLProps<CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, "ref">, keyof CommonProps | keyof AbsoluteSizingProps | keyof RelativeSizingProps>
Returns

ReactElement