WeChat Open Platform

Mini Programs Documentation

canvasContext.createLinearGradient

Definition

Creates a linear gradient color.

Tip: addColorStop() needs to be used to specify gradient stops, there must be at least two.

Parameters

Parameter Type Definition
x0 Number The x-coordinate of the start point
y0 Number The y-coordinate of the start point
x1 Number The x-coordinate of the end point
y1 Number The y-coordinate of the end point

Examples

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()