目录

Canvas Component

The Canvas component provides a drawing UI. You can use this component as follows:

  1. Add the Canvas component to the HXML file.

    Specify canvas-id ="myCanvas" to identify a unique canvas, which is used to obtain the canvas object.

    Specify type to define the canvas type. In this example, type is set to 2d.

    <!-- Specify a 2d canvas. -->
    <canvas canvas-id="myCanvas" type="2d" style="border: 1px solid; width: 300px; height: 150px;" />
  2. Obtain the rendering context of the canvas object from the .js file.

    Use createCanvasContext to select the specified canvas to obtain its context.

    Subsequent canvas and rendering operations need to be processed by using this object context.

    let canvas = has.createCanvasContext('myCanvas'); // ID input to the HXML file
  3. Draw elements in the .js file.

    You can draw elements on the canvas by using a drawing API of the rendering context.

    canvas.fillRect(10, 10, 50, 50);
    canvas.draw();