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