Tencent Cloud

Recent Pages

Canvas

Last updated: 2024-11-27 18:14:43

Feature description:Canvas. This component is a native component, and there are some restrictions when using it. The related API is wx.createCanvasContext. Currently the new Canvas 2D API is supported, and the old Canvas API is no longer updated and supported.
Parameter and description:
Property
Type
Default value
Description
type
string
2d
Supported canvas type: 2d only.
canvas-id
string
-
Unique identifier of the canvas component.
disable-scroll
boolean
false
Prevents screen scrolling and pull-to-refresh when moving within the canvas and gesture events are bound.
bindtouchstart
eventhandle
-
Triggered when a finger touch action starts.
bindtouchmove
eventhandle
-
Triggered when a finger moves after touching.
bindtouchend
eventhandle
-
Triggered when a finger touch action ends.
bindtouchcancel
eventhandle
-
Triggered when a finger touch action is interrupted, such as by an incoming call or popup.
bindlongtap
eventhandle
-
Triggered after a finger long-presses for 500 ms; moving after triggering the long-press event will not cause the screen to scroll.
binderror
eventhandle
-
Triggered when an error occurs. detail = {errMsg: 'something wrong'}
Notes:
The default width and height of the canvas tag are 300 pixels and 150 pixels respectively.
The canvas-id must be unique within the same page; if a duplicate canvas-id is used, the corresponding canvas will be hidden and will not function properly.
Avoid setting excessively large width and height values, as this can cause crashes on Android devices.
The old canvas API uses the canvas-id to uniquely identify the canvas, and the new Canvas 2D API can directly use the id for identification.
The old canvas API uses wx.createCanvasContext to synchronously obtain the CanvasContext. In contrast, the new Canvas 2D interface requires using SelectorQuery to asynchronously obtain the Canvas object, and then Canvas.getContext to get the RenderingContext.
The canvas size in the old canvas API is determined by the actual rendering width and cannot be modified by developers. The new Canvas 2D API allows developers to modify the logical size of the canvas, with the default width and height of 300 pixels and150 pixels respectively. The physical pixels and logical pixels may not be equal on different devices, so you need to use wx.getWindowInfo to obtain the device's pixel ratio and multiply it by the actual size of the canvas.
Example (new API):
WXML
JAVASCRIPT
<canvas type="2d" id="myCanvas"></canvas>
Page({
  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
﻿
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)
﻿
        ctx.fillRect(0, 0, 100, 100)
      })
  }
})
Example (old API):
WXML
JAVASCRIPT
<!-- canvas.wxml -->
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
<!-- When using absolute positioning, the canvas at the back of the document flow is displayed at a higher level than the canvas at the front -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas>
<!-- Because the canvas-id is the same as the previous canvas, the canvas will not be displayed and an error event will be sent to AppService -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>
Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  onReady: function (e) {
    // Uses wx.createContext to get the Canvas context
    var context = wx.createCanvasContext('firstCanvas')
﻿
    context.setStrokeStyle("#00ff00")
    context.setLineWidth(5)
    context.rect(0, 0, 200, 200)
    context.stroke()
    context.setStrokeStyle("#ff0000")
    context.setLineWidth(2)
    context.moveTo(160, 100)
    context.arc(100, 100, 60, 0, 2 * Math.PI, true)
    context.moveTo(140, 100)
    context.arc(100, 100, 40, 0, Math.PI, false)
    context.moveTo(85, 80)
    context.arc(80, 80, 5, 0, 2 * Math.PI, true)
    context.moveTo(125, 80)
    context.arc(120, 80, 5, 0, 2 * Math.PI, true)
    context.stroke()
    context.draw()
  }
})
﻿
﻿

Contact Us

Contact our sales team or business advisors to help your business.

Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

7x24 Phone Support

tencent cloud

Recent Pages

Canvas

Was this page helpful?

Was this page helpful?

Property	Type	Default value	Description
type	string	2d	Supported canvas type: 2d only.
canvas-id	string	-	Unique identifier of the canvas component.
disable-scroll	boolean	false	Prevents screen scrolling and pull-to-refresh when moving within the canvas and gesture events are bound.
bindtouchstart	eventhandle	-	Triggered when a finger touch action starts.
bindtouchmove	eventhandle	-	Triggered when a finger moves after touching.
bindtouchend	eventhandle	-	Triggered when a finger touch action ends.
bindtouchcancel	eventhandle	-	Triggered when a finger touch action is interrupted, such as by an incoming call or popup.
bindlongtap	eventhandle	-	Triggered after a finger long-presses for 500 ms; moving after triggering the long-press event will not cause the screen to scroll.
binderror	eventhandle	-	Triggered when an error occurs. detail = {errMsg: 'something wrong'}

tencent cloud

Sign Up

Log in

Recent Pages

Canvas

Was this page helpful?

Was this page helpful?