Applet basic capabilities canvas ~

Canvas canvas

All  canvas  drawing must be done with JavaScript:

WXML :( our next example without special statement will use this as a template WXML not repeat)

<canvas canvas-id="myCanvas" style="border: 1px solid;"/>

JS :( In the following example we will put onLoad in JS)

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

Step 1: Create a drawing context Canvas

First of all, we need to create a Canvas drawing context  CanvasContext .

CanvasContext applet is an object built, some drawing methods:

const ctx = wx.createCanvasContext('myCanvas') 

Step 2: Use the drawing context to paint described Canvas

Then, we have to describe what you want to draw in the Canvas.

Drawing context set fill color to red:

ctx.setFillStyle('red') 

By  fillRect(x, y, width, height) drawing a rectangle method, the filling is just set in red:

ctx.fillRect(10, 10, 150, 75) 

The third step: Paint

Tell  canvas  components you want to just draw up a description:

ctx.draw()

result:

Coordinate System

canvas is a two-dimensional grid of them. The coordinates of the upper left corner is (0, 0).

In the previous section, we used this method  fillRect(0, 0, 150, 75).

Its meaning is: from the top left corner (0, 0)to start, draw a 150 x 75rectangle of px.

The sample code

We can  canvas  with some events, to observe its coordinate system

<canvas canvas-id="myCanvas"
  style="margin: 5px; border:1px solid #d3d3d3;"
  bindtouchstart="start"
  bindtouchmove="move"
  bindtouchend="end"/>

<view hidden="{{hidden}}">
  Coordinates: ({{x}}, {{y}})
</view>
Page({
  data: {
    x: 0,
    y: 0,
    hidden: true
  },
  start (e) {
    this.setData({
      hidden: false,
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  move (e) {
    this.setData({
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  end (e) {
    this.setData({
      hidden: true
    })
  }
})

When you put the finger on canvas, it will show the coordinates of the touch point in the following:

Gradual change

A gradient can be used to fill rectangles, circles, lines, and text. Fill color can be a fixing unfixed bit color.

We offer two color gradient ways:

• createLinearGradient(x, y, x1, y1) Creating a linear gradient
• createCircularGradient(x, y, r) Create a gradient starting from the center

Once we have created a gradient object, we must add two color gradient points.

addColorStop(position, color) A method for specifying the location of the point and the color gradient color, location must lie between 0 and 1.

It can be used setFillStyle and a  setStrokeStyle method to set the gradient, and then drawing described.

use createLinearGradient()

const ctx = wx.createCanvasContext('myCanvas')

// Create linear gradient
const grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

use createCircularGradient()

const ctx = wx.createCanvasContext('myCanvas')

// Create circular gradient
const grd = ctx.createCircularGradient(75, 50, 50)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

 

 

 

 

 

.