            Coding With Fun

Home Docker Django Node.js Articles Python pip guide FAQ Policy

WeChat program API drawing

May 19, 2021 WeChat Mini Program Development Document

Table of contents

1. API interface

2. The method list for the context object

API interface

Method	Description
createCanvasContext	Create canvas drawing context (specify canvasId)
CreateContext (not recommended)	Create a canvas drawing context
drawCanvas (not recommended)	Draw
canvasToTempFilePath	Export the picture

The method list for the context object

Color, style, shadow

Method	Description
setFillStyle	Set the fill style
setStrokeStyle	Style the lines
setShadow	Set the shadow

Gradient

Method	Description
createLinearGradient	Create a linear gradient
createCircularGradient	Create a circular gradient
addColorStop	Add a color change at a point in the gradient

Line style

Method	Description
setLineWidth	Set the line width
setLineCap	Style line endpoints
setLineJoin	Style the intersection of the two lines
setMiterLimit	Set the maximum tilt

Rectangular

Method	Description
rect	Create a rectangle
fillRect	Fill a rectangle
strokeRect	Draw a rectangle (not filled)
clearRect	In a given rectangular area, clear the pixels on the canvas

Path

Method	Description
fill	Fill the current path
stroke	Stroke the current path
beginPath	Start a path
closePath	Close a path
moveTo	Move the path to the specified point in the canvas, but do not create lines.
lineTo	Add a new point, and then create a line in the canvas from that point to the last specified point.
arc	Add an arc path to the current path and draw clockwise.
quadraticCurveTo	Create a second Fang Besier curve
bezierCurveTo	Create a three-way Basser curve

Deformation

method	illustrate
scale	Zeng
rotate	Cut the coordinate axis rotate clockwise
translate	Zoom in the origin of the coordinate

Word

Method	Description
fillText	Draws the filled text on the canvas
setFontSize	Set the font size
setTextBaseline	Set the font baseline
setTextAlign	Set the font alignment

Image

Method	Description
drawImage	Draw an image on the canvas

Mixed

Method	Description
setGlobalAlpha	Set global brush transparency

Other

Method	Description
save	Save the current drawing context
restore	Restore the previously protected drawing context
draw	Draw
getActions (not recommended)	Gets the `context` stored on the current context
clearActions (not recommended)	Empty the current stored drawing action