目录

canvas

Represents the canvas component used to customize drawings.

Since: 1.0.0

Associated document: has.createCanvasContext

Constraints

  1. The default width and height of the canvas tag are 300 px and 150 px, respectively.
  2. Duplicate canvas-id values are not allowed within a page. Reusing a canvas-id value will hide and disable the corresponding canvas.
  3. For Canvas 2D, the width and height must be explicitly defined. The default size is 300 px*150 px, and the maximum size is 1365 px*1365 px.

Properties

Name

Type

Default Value

Mandatory

Description

type

string

-

No

Canvas type. The value can be 2d.

canvas-id

string

-

No

Unique ID of the canvas component.

disable-scroll

boolean

false

No

Whether to disable screen scrolling and pull-to-refresh.

bindtouchstart

eventhandle

-

No

Event handler triggered when a touch action starts.

bindtouchmove

eventhandle

-

No

Event handler triggered when a finger moves after touching.

bindtouchend

eventhandle

-

No

Event handler triggered when a touch action ends.

bindtouchcancel

eventhandle

-

No

Event handler triggered when a touch action is interrupted (for example, by locking the screen, switching applications, or receiving a call reminder).

bindlongtap

eventhandle

-

No

Event handler triggered after a long press of 500 ms. Moving after a long press will not trigger screen scrolling.

binderror

eventhandle

-

No

Event handler triggered when an error occurs, with detail.errMsg.

Example

hxml:

<canvas
  canvas-id="canvas"
  disable-scroll="{{false}}"
  style="border: 3px solid blue">
</canvas>
<button bindtap="setFontSize">Set the font size</button>

js:

Page({
  setFontSize() {
    var ctx = has.createCanvasContext('canvas');
    ctx.setFontSize(20);
    ctx.fillText('20', 20, 20);
    ctx.draw();
  }
})