or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

components.mdcontext.mddevice.mdframework.mdindex.mdlocation.mdmedia.mdnavigation.mdnetwork.mdstorage.mdui-controls.md
tile.json

context.mddocs/

Context & Observers

Context creation and observer APIs for audio playback, canvas operations, video control, intersection detection, and media queries.

Capabilities

Audio Context

Create and manage audio contexts for playing background music and sound effects with precise control over playback.

/**
 * Create inner audio context for audio playback
 * @returns Audio context instance
 */
function createInnerAudioContext(): InnerAudioContext;

interface InnerAudioContext {
  src: string;
  autoplay: boolean;
  loop: boolean;
  volume: number;
  startTime: number;
  duration: number;
  currentTime: number;
  paused: boolean;
  buffered: number;
  
  play(): void;
  pause(): void;
  stop(): void;
  seek(position: number): void;
  destroy(): void;
  
  onCanplay(callback: () => void): void;
  onPlay(callback: () => void): void;
  onPause(callback: () => void): void;
  onStop(callback: () => void): void;
  onEnded(callback: () => void): void;
  onTimeUpdate(callback: () => void): void;
  onError(callback: (error: any) => void): void;
  onWaiting(callback: () => void): void;
  onSeeking(callback: () => void): void;
  onSeeked(callback: () => void): void;
  
  offCanplay(callback?: () => void): void;
  offPlay(callback?: () => void): void;
  offPause(callback?: () => void): void;
  offStop(callback?: () => void): void;
  offEnded(callback?: () => void): void;
  offTimeUpdate(callback?: () => void): void;
  offError(callback?: (error: any) => void): void;
  offWaiting(callback?: () => void): void;
  offSeeking(callback?: () => void): void;
  offSeeked(callback?: () => void): void;
}

Usage Example:

import { createInnerAudioContext } from "@dcloudio/uni-h5";

// Create audio context
const audioContext = createInnerAudioContext();

// Configure audio
audioContext.src = 'https://example.com/audio.mp3';
audioContext.volume = 0.8;
audioContext.loop = true;

// Set up event listeners
audioContext.onPlay(() => {
  console.log('Audio started playing');
});

audioContext.onError((error) => {
  console.error('Audio error:', error);
});

// Play audio
audioContext.play();

// Later, clean up
audioContext.destroy();

Canvas Context

Create canvas contexts for 2D drawing operations with comprehensive drawing capabilities.

/**
 * Create canvas context for drawing operations
 * @param canvasId - Canvas element ID
 * @param component - Optional component instance
 * @returns Canvas context instance
 */
function createCanvasContext(canvasId: string, component?: any): CanvasContext;

/**
 * Create canvas context asynchronously (X platform)
 * @param canvasId - Canvas element ID
 * @param component - Optional component instance
 * @returns Promise with canvas context
 */
function createCanvasContextAsync(canvasId: string, component?: any): Promise<CanvasContext>;

interface CanvasContext {
  // Drawing methods
  fillRect(x: number, y: number, width: number, height: number): void;
  strokeRect(x: number, y: number, width: number, height: number): void;
  clearRect(x: number, y: number, width: number, height: number): void;
  fill(): void;
  stroke(): void;
  
  // Path methods
  beginPath(): void;
  closePath(): void;
  moveTo(x: number, y: number): void;
  lineTo(x: number, y: number): void;
  arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;
  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
  
  // Text methods
  fillText(text: string, x: number, y: number, maxWidth?: number): void;
  strokeText(text: string, x: number, y: number, maxWidth?: number): void;
  measureText(text: string): { width: number };
  
  // Style properties
  fillStyle: string | CanvasGradient | CanvasPattern;
  strokeStyle: string | CanvasGradient | CanvasPattern;
  lineWidth: number;
  lineCap: 'butt' | 'round' | 'square';
  lineJoin: 'bevel' | 'round' | 'miter';
  font: string;
  textAlign: 'start' | 'end' | 'left' | 'right' | 'center';
  textBaseline: 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom';
  
  // Transform methods
  scale(x: number, y: number): void;
  rotate(angle: number): void;
  translate(x: number, y: number): void;
  transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
  setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
  
  // State methods
  save(): void;
  restore(): void;
  draw(reserve?: boolean): void;
}

Usage Example:

import { createCanvasContext } from "@dcloudio/uni-h5";

// Create canvas context
const ctx = createCanvasContext('myCanvas');

// Draw a rectangle
ctx.fillStyle = '#ff0000';
ctx.fillRect(10, 10, 100, 50);

// Draw text
ctx.font = '16px Arial';
ctx.fillStyle = '#000000';
ctx.fillText('Hello Canvas!', 10, 80);

// Draw and render
ctx.draw();

Video Context

Create video contexts for controlling video playback with programmatic control over video elements.

/**
 * Create video context for video control
 * @param videoId - Video element ID
 * @param component - Optional component instance
 * @returns Video context instance
 */
function createVideoContext(videoId: string, component?: any): VideoContext;

interface VideoContext {
  play(): void;
  pause(): void;
  seek(time: number): void;
  stop(): void;
  sendDanmu(danmu: { text: string; color: string }): void;
  playbackRate(rate: number): void;
  requestFullScreen(direction?: 0 | 90 | -90): void;
  exitFullScreen(): void;
  showStatusBar(): void;
  hideStatusBar(): void;
}

Usage Example:

import { createVideoContext } from "@dcloudio/uni-h5";

// Create video context
const videoContext = createVideoContext('myVideo');

// Control video playback
videoContext.play();

// Seek to specific time
videoContext.seek(30); // 30 seconds

// Send danmu (bullet comments)
videoContext.sendDanmu({
  text: 'Great video!',
  color: '#ff0000'
});

// Enter fullscreen
videoContext.requestFullScreen();

Intersection Observer

Create intersection observers to monitor when elements enter or leave the viewport, useful for lazy loading and scroll animations.

/**
 * Create intersection observer
 * @param component - Optional component instance
 * @param options - Observer configuration options
 * @returns Intersection observer instance
 */
function createIntersectionObserver(component?: any, options?: IntersectionObserverOptions): IntersectionObserver;

interface IntersectionObserverOptions {
  thresholds?: number[];
  initialRatio?: number;
  observeAll?: boolean;
}

interface IntersectionObserver {
  relativeTo(selector: string, margins?: { left?: number; top?: number; right?: number; bottom?: number }): IntersectionObserver;
  relativeToViewport(margins?: { left?: number; top?: number; right?: number; bottom?: number }): IntersectionObserver;
  observe(selector: string, callback: (result: IntersectionObserverResult) => void): void;
  disconnect(): void;
}

interface IntersectionObserverResult {
  id: string;
  dataset: Record<string, any>;
  intersectionRatio: number;
  intersectionRect: DOMRect;
  boundingClientRect: DOMRect;
  relativeRect: DOMRect;
  time: number;
}

Usage Example:

import { createIntersectionObserver } from "@dcloudio/uni-h5";

// Create intersection observer
const observer = createIntersectionObserver(null, {
  thresholds: [0, 0.25, 0.5, 0.75, 1]
});

// Observe elements relative to viewport
observer.relativeToViewport({ bottom: 20 }).observe('.lazy-image', (result) => {
  if (result.intersectionRatio > 0) {
    console.log('Element entered viewport:', result.id);
    // Load image or trigger animation
  }
});

// Later, stop observing
observer.disconnect();

Media Query Observer

Create media query observers to respond to viewport size changes and device orientation changes.

/**
 * Create media query observer
 * @param component - Optional component instance
 * @returns Media query observer instance
 */
function createMediaQueryObserver(component?: any): MediaQueryObserver;

interface MediaQueryObserver {
  observe(descriptor: MediaQueryDescriptor, callback: (result: MediaQueryObserverResult) => void): void;
  disconnect(): void;
}

interface MediaQueryDescriptor {
  minWidth?: number;
  maxWidth?: number;
  width?: number;
  minHeight?: number;
  maxHeight?: number;
  height?: number;
  orientation?: 'landscape' | 'portrait';
}

interface MediaQueryObserverResult {
  matches: boolean;
}

Usage Example:

import { createMediaQueryObserver } from "@dcloudio/uni-h5";

// Create media query observer
const mediaObserver = createMediaQueryObserver();

// Watch for mobile viewport
mediaObserver.observe(
  { maxWidth: 768 },
  (result) => {
    if (result.matches) {
      console.log('Mobile viewport detected');
      // Apply mobile styles or behavior
    } else {
      console.log('Desktop viewport detected');
      // Apply desktop styles or behavior
    }
  }
);

// Watch for orientation changes
mediaObserver.observe(
  { orientation: 'landscape' },
  (result) => {
    if (result.matches) {
      console.log('Landscape orientation');
    } else {
      console.log('Portrait orientation');
    }
  }
);

Canvas Additional APIs

Additional canvas-related APIs for advanced canvas operations:

/**
 * Get canvas image data
 * @param options - Image data options
 * @returns Promise with image data
 */
function canvasGetImageData(options: CanvasGetImageDataOptions): Promise<CanvasGetImageDataResult>;

/**
 * Put canvas image data
 * @param options - Put image data options
 */
function canvasPutImageData(options: CanvasPutImageDataOptions): void;

/**
 * Convert canvas to temporary file
 * @param options - Canvas export options
 * @returns Promise with file path
 */
function canvasToTempFilePath(options: CanvasToTempFilePathOptions): Promise<CanvasToTempFilePathResult>;

interface CanvasGetImageDataOptions {
  canvasId: string;
  x: number;
  y: number;
  width: number;
  height: number;
  success?: (result: CanvasGetImageDataResult) => void;
  fail?: (result: any) => void;
  complete?: (result: any) => void;
}

interface CanvasGetImageDataResult {
  width: number;
  height: number;
  data: Uint8ClampedArray;
}

Best Practices

  • Memory Management: Always destroy contexts when no longer needed
  • Performance: Use canvas contexts efficiently, avoid frequent redraws
  • Audio Management: Handle audio lifecycle properly, especially on mobile devices
  • Observer Cleanup: Disconnect observers to prevent memory leaks
  • Error Handling: Implement proper error handling for all context operations