tencent cloud

Tencent Cloud Super App as a Service

Perjanjian
Perjanjian Pemrosesan dan Keamanan Data
DokumentasiTencent Cloud Super App as a Service

Canvas

Mode fokus
Ukuran font
Terakhir diperbarui: 2024-11-21 18:34:18
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.
Topik selanjutnya: Perjanjian Pemrosesan dan Keamanan Data

Bantuan dan Dukungan

Apakah halaman ini membantu?

masukan