Canvas

Canvas is a widget that can be used to draw graphics using a canvas context.

Import this type with “”

Example:

Parameters:

  • width: number
    • the width of the canvas context to create
  • height: number
    • the height of the canvas context to create
      Returns:
  1. const {Canvas, ui, device} = require('tabris');
  3. // Draw shapes on a canvas using HTML5 Canvas API
  5. new Canvas({
  6.   left: 10, top: 10, right: 10, bottom: 10
  7. }).on('resize', ({target: canvas, width, height}) => {
  8.   let scaleFactor = device.scaleFactor;
  9.   ctx.scale(scaleFactor, scaleFactor);
  10.   ctx.strokeStyle = 'rgb(78, 154, 217)';
  12.   ctx.moveTo(20, 20);
  13.   ctx.lineTo(width - 40, height - 40);
  14.   ctx.stroke();
  16.   // draw image
  17.   ctx.putImageData(createImageData(80, 40), 100, 100);
  19.   // copy region
  20.   let data = ctx.getImageData(0, 0, 100, 100);
  21.   ctx.putImageData(data, 180, 100);
  24. function createImageData(width, height) {
  25.   let array = [];
  26.   for (let y = 0; y < height; y++) {
  27.     for (let x = 0; x < width; x++) {
  28.       let alpha = x % 20 > y % 20 ? 255 : 0;
  29.       array.push(200, 0, 0, alpha);
  30.     }
  31.   }
  32.   return new ImageData(new Uint8ClampedArray(array), width, height);
  33. }

原文: