tencent cloud

All product documents
Tencent Cloud Super App as a Service
DocumentationTencent Cloud Super App as a ServiceGuildlines for Mini Program DevelopmentGuidanceBasic CompetenciesCanvas
Canvas
Download PDF
Last updated: 2024-11-21 18:34:18
Canvas
Last updated: 2024-11-21 18:34:18
Download PDF
The Canvas provides a drawing interface on which you can draw anything you want.

1. Basic use

Step 1：Create a Canvas drawing context

<!-- 2d type canvas -->
<canvas id="myCanvas" type="2d" style="border: 1px solid; width: 300px; height: 150px;" />
First you need to add the Canvas to the WXML.
Specify id="myCanvas" to uniquely identify a canvas, which will be used to get the Canvas object later.
Specify type to define the type of the canvas, for this example, type="2d" is used.

Step 2: Use the Canvas drawing context to describe the drawing

wx.createSelectorQuery()
    .select('#myCanvas') // id in WXML
    .fields({ node: true, size: true })
    .exec((res) => {
        // Canvas Object
        const canvas = res[0].node
        // rendering context
        const ctx = canvas.getContext('2d')
    })
By selecting the canvas from the previous step via SelectorQuery, we can get the Canvas.
And through Canvas.getContext, we can get the rendering context RenderingContext.
Subsequent canvas operations and rendering operations need to be implemented through these two objects.

Step 3: Initialise the Canvas

wx.createSelectorQuery()
    .select('#myCanvas') // id in WXML
    .fields({ node: true, size: true })
    .exec((res) => {
        // Canvas Object
        const canvas = res[0].node
        // rendering context
        const ctx = canvas.getContext('2d')



        // The actual drawing width and height of the Canvas.
        const width = res[0].width
        const height = res[0].height



        // Initialise canvas size
        const dpr = wx.getWindowInfo().pixelRatio
        canvas.width = width * dpr
        canvas.height = height * dpr
        ctx.scale(dpr, dpr)
    })
The canvas width is divided into a rendered width and a logical width:
Rendered aspect is the actual width and height of the canvas canvas on the page, i.e. the size obtained by boundingClientRect requests to the nodes.
The logical width is the size of the logical width of the canvas during the rendering process, e.g. if you draw a rectangle with the same logical width, the rectangle will eventually fill the entire canvas. The logical width defaults to 300 * 150.
On different devices, there are cases where the physical pixels and logical pixels are not equal, so generally we need to use wx.getWindowInfo to get the pixel ratio of the device, multiply it by the rendered size of the canvas, and use it as the logical size of the canvas.

Step 4: Drawing

// Omit the initialisation steps above, the canvas object and ctx rendering context have already been obtained

// Empty the canvas
ctx.clearRect(0, 0, width, height)


// Drawing a red square
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);


// Drawing Blue Translucent Squares
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);
The drawing api on the render context allows us to do arbitrary drawing on the canvas.

2. Advanced use

2.1 Drawing pictures

// Omit the initialisation steps above, the canvas object and ctx rendering context are already obtained

// The image object
const image = canvas.createImage()
// Image load completion callback
image.onload = () => {
    // Draw the image to the canvas
    ctx.drawImage(image, 0, 0)
}
// Set the image src
image.src = 'https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon64_wx_logo.png'
With Canvas.createImage we can create an image object and load the image. Once the image is loaded and the onload callback is triggered, use ctx.drawImage to draw the image to the canvas.

2.2 Generate Image

// Omitting the initialisation steps above, the canvas object and the ctx rendering context are already acquired



// Drawing a red square
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);



// Drawing Blue Translucent Squares
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);



// Generate Image
wx.canvasToTempFilePath({
    canvas,
    success: res => {
        // Path to the generated image temporary file
        const tempFilePath = res.tempFilePath
    },
})
The wx.canvasToTempFilePath interface allows you to generate a temporary image file from the contents of a canvas.

2.3 Frame animation

// Omit the initialisation steps above, the canvas object and the ctx rendering context have already been fetched.


const startTime = Date.now()



// Frame rendering callbacks
const draw = () => {
  const time = Date.now()
  // Calculate the elapsed time
  const elapsed = time - startTime



  // Calculate the animation position
  const n = Math.floor(elapsed / 3000)
  const m = elapsed % 3000
  const dx = (n % 2 ? 0 : 1) + (n % 2 ? 1 : -1) * (m < 2500 ? easeOutBounce(m / 2500) : 1)
  const x = (width - 50) * dx



  // Rendering
  ctx.clearRect(0, 0, width, height)
  ctx.fillStyle = 'rgb(200, 0, 0)';
  ctx.fillRect(x, height / 2 - 25, 50, 50);



  // Register for next frame rendering
  canvas.requestAnimationFrame(draw)
}


draw()
With Canvas.requestAnimationFrame, you can register an animation frame callback and draw the animation frame by frame within the callback.

2.4 Custom Fonts

Custom fonts can be loaded for the Canvas via wx.loadFontFace.
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

Contact Us

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

Contact Us
Technical Support

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

Submit a Ticket
7x24 Phone Support
Hong Kong, China
+852 800 906 020 (Toll Free)
United States
+1 844 606 0804 (Toll Free)
United Kingdom
+44 808 196 4551 (Toll Free)
Canada
+1 888 605 7930 (Toll Free)
Australia
+61 1300 986 386 (Toll Free)
EdgeOne hotline
+852 300 80699
More local hotlines coming soon