harmony 鸿蒙canvas

  • 2022-08-09
  • 浏览 (807)

canvas

NOTE

This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

The <canvas> component is used for customizing drawings.

Required Permissions

None

Child Components

Not supported

Attributes

The universal attributes are supported.

Styles

The universal styles are supported.

Events

The universal events are supported.

Methods

In addition to the universal methods, the following methods are supported.

getContext

getContext(type: ‘2d’, options?: ContextAttrOptions): CanvasRenderingContext2D

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

Parameters

Name Type Mandatory Description
type string Yes Object type. 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 value

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

toDataURL6+

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 value

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..."
  }
}

你可能感兴趣的鸿蒙文章

harmony 鸿蒙JavaScript-compatible Web-like Development Paradigm

harmony 鸿蒙Data Type Attributes

harmony 鸿蒙button

harmony 鸿蒙chart

harmony 鸿蒙divider

harmony 鸿蒙image-animator

harmony 鸿蒙image

harmony 鸿蒙input

harmony 鸿蒙label

harmony 鸿蒙marquee

0  赞