canvas

The <canvas> component is used for customizing drawings.

Required Permissions

None

Child Components

Not supported

Attributes

Attributes in Universal Attributes are supported.

Styles

Styles in Universal Styles are supported.

Events

Events in Universal Events are supported.

Methods

In addition to the methods in Universal Methods, the following events are supported.

getContext

getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext

Obtains the canvas drawing context. This API cannot be called in onInit or onReady.

• Parameters

  Name	Type	Mandatory	Description
  type	string	Yes	The value is set to '2d', indicating that a 2D drawing object is returned. This object can be used to draw rectangles, texts, and images on the canvas component.
  options6+	ContextAttrOptions	No	Whether to enable anti-aliasing. By default, anti-aliasing is disabled.

  Table 1 ContextAttrOptions

  Name	Type	Description
  antialias	boolean	Whether to enable anti-aliasing. The default value is false.

• Return values

  Type	Description
  CanvasRenderingContext2D	2D drawing object, which can be used to draw rectangles, images, and texts on the canvas component.

toDataURL⁶⁺

toDataURL(type?: string, quality?: number): string

Generates a URL containing image display information.

• Parameters

  Name	Type	Mandatory	Description
  type	string	No	Image format. The default value is image/png.
  quality	number	No	Image quality, which ranges from 0 to 1, when the image format is image/jpeg or image/webp. If the set value is beyond the value range, the default value 0.92 is used.

• Return values

  Type	Description
  string	Image URL.

Example

<!-- xxx.hml -->
<div>
  <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
  <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
</div>

// xxx.js
export default {
  handleClick() {
    const el = this.$refs.canvas1;
    var dataURL = el.toDataURL();
    console.log(dataURL);
    // "data:image/png;base64,xxxxxxxx..."
  }
}