# Canvas canvas

canvas assembly Provides a drawing interface on which arbitrary drawing can be done

# Basic usage

# Step 1: In WXML Add in canvas assembly

<!-- 2d Type of canvas -->
<canvas id="myCanvas" type="2d" style="border: 1px solid width: 300px height: 150px" />

First need to be in the WXML Add in canvas assembly。

Appoint id="myCanvas" Uniquely identifies a Canvas, for subsequent acquisition Canvas object。

Appoint type Used to define the canvas type, this example uses the type="2d" Example.

# Step 2: Get Canvas Object and Rendering Context

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

adopt SelectorQuery Select the previous step Canvas can be accessed. Canvas object。

Again through Canvas.getContext♪ we have access to Rendering context RenderingContext。

Subsequent canvas operations and rendering operations need to be implemented through these two objects.

# Step 3: Initialize Canvas

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

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

        // Initializes the canvas size 
        const DPR  = wx.getWindowInfo ().pixelRatio 
        canvas.width = width * DPR 
        canvas.height = height * DPR 
        ctx.scale(DPR,  DPR )
    })

canvas The width of the high score is the rendering width and the logical width:

Render width is canvas The actual width and height of the canvas in the page, that is, by performing a boundingClientRect The size obtained by the request.
Logical width is canvas The logical width and height size during rendering, such as drawing a rectangle with the same logical width and height, and eventually the rectangle will fill the entire canvas. The logical width defaults to 300 * 150。

On different devices, there are physical pixels and logical pixels are not equal, so generally we need to use the [wx.getWindowInfo ]((wx.getWindowInfo )) Gets the pixel ratio of the device, multiplied by the canvas As the logical size of the canvas.

# Step 4: Draw

{% Minicode ('smH8LGmn7Lz5') %}

// Omitting the initialization step above, you have obtained the canvas Object and ctx Rendering context

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

// Draw a red square
ctx.fillStyle = 'RGB (200, 0, 0)'
ctx.fillRect(10, 10, 50, 50)

// Draw a blue translucent square
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'
ctx.fillRect(30, 30, 50, 50)

adopt Rendering context Drawing on the Api, we can do arbitrary drawing on the canvas.

# Advanced use

# Draw the picture

{% Minicode ('2FHoZGmA7XzI') %}

// Omitting the initialization step above, you have obtained the canvas Object and ctx Rendering context

// Picture object
const image = canvas.createImage()
// Picture Loading Done Callback
image.onload = () => {
    // Draw the picture to the canvas on
    ctx.drawImage(image, 0, 0)
}
// Set up picture src
image.src = 'https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon64_wx_logo.png'

adopt Canvas.createImage We can create picture objects and load pictures. When the picture is loaded it triggers onload After the callback, use the ctx.drawImage You can draw the picture to canvas Go.

# Generate picture

{% Minicode ('FPIGmGmT7fzB') %}

// Omitting the initialization step above, you have obtained the canvas Object and ctx Rendering context

// Draw a red square
ctx.fillStyle = 'RGB (200, 0, 0)'
ctx.fillRect(10, 10, 50, 50)

// Draw a blue translucent square
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'
ctx.fillRect(30, 30, 50, 50)

// Generate picture
wx.canvasToTempFilePath({
    canvas,
    success: res => {
        // Generated picture temporary file path
        const tempFilePath = res.tempFilePath 
    },
})

adopt wx.canvasToTempFilePath Interface, you can set the canvas Generates a temporary image file on the.

# Frame animation

{% Minicode ('fmIKNGmF7tzV') %}

// Omitting the initialization step above, you have obtained the canvas Object and ctx Rendering context

const startTime = Date.now()

// Frame Rendering Callback
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 the next frame rendering
  canvas.requestAnimationFrame(draw)
}

draw()

adopt Canvas.requestAnimationFrame You can register an animation frame callback and draw the animation frame by frame within the callback.

# Custom Fonts

adopt wx.loadFontFace Can be used for Canvas Load custom fonts.

{% Minicode ('GAIwtGmB7Ez3') %}

# Recording video

adopt MediaRecorder It is possible to Canvas Content is recorded as video and saved.

{% Minicode ('MCz3kPmC7zpa') %}

# WebGL

{% Minicode ('9gIuqGmN7QzX') %}

<canvas type="webgl"  id="myCanvas" />

// Omitting the initialization step above, you have obtained the canvas object

const gl = canvas.getContext('webgl' ) // Obtain Webgl  Rendering context