NativeScript Canvas

由以下提供支持

• CanvasNative - Rust
• CanvasNative - IOS
• CanvasNative - Android

安装

tns plugin add nativescript-canvas-plugin

注意 目前最低 iOS 支持 11 | 最低 Android 支持 17

重要：确保在 Page 元素上包含 xmlns:canvas="nativescript-canvas-plugin" 以支持 {N} 核心

用法

<canvas:TNSCanvas id="canvas" width="100%" height="100%" ready="canvasReady"/>

2D

let ctx;
let canvas;
export function canvasReady(args) {
  console.log('canvas ready');
  canvas = args.object;
  console.log(canvas);
  ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(10, 10, 150, 100);
}

WEBGL

let gl;
let canvas;
export function canvasReady(args) {
  console.log('canvas ready');
  canvas = args.object;
  gl = canvas.getContext('webgl'); // 'webgl' || 'webgl2'
  gl.viewport(0, 0,
  gl.drawingBufferWidth, gl.drawingBufferHeight);
  // Set the clear color to darkish green.
  gl.clearColor(0.0, 0.5, 0.0, 1.0);
  // Clear the context with the newly set color. This is
  // the function call that actually does the drawing.
  gl.clear(gl.COLOR_BUFFER_BIT);
  canvas.flush(); // must be called to draw on screen
}

API

• 2D 与 Web 规范 类似
• WebGL 与 Web 规范 类似
• WebGL2 与 Web 规范 类似