Attributes | Types | Note |
fillStyle | String | |
strokeStyle | String | |
font | String | - |
globalCompositeOperation | String | The type of compositing operation applied when drawing a new shape. The current Android version only applies compositing to fill fill blocks, compositing effects used for stroke line segments are source-over. The currently supported operations are: Android:xor, source-over, source-atop, destination-out, lighter, overlay, darken, lighten, hard-light iOS:xor, source-over, source-atop, destination-over, destination-out, lighter, multiply, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, saturation, luminosity |
shadowOffsetX | Number | The horizontal offset of the shadow relative to the shape. |
shadowOffsetY | Number | The vertical offset of the shadow relative to the shape. |
shadowColor | Number | The color of the shadow. |
shadowBlur | Number | The blur level of the shadow. |
lineWidth | Number | |
lineCap | Number | |
lineJoin | Number | |
miterLimit | Number | |
lineDashOffset | Number | The offset of the dashed line, with an initial value of zero. |
globalAlpha | Number | The global brush opacity. The range is 0-1, where 0 indicates complete transparency and 1 indicates complete opacity. |
Value | Description |
bevel | bevel |
round | round |
miter | miter |
The method is used as follows: CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise).
const ctx = wx.createCanvasContext('myCanvas')// Draw coordinatesctx.arc(100, 75, 50, 0, 2 * Math.PI)ctx.setFillStyle('#EEEEEE')ctx.fill()ctx.beginPath()ctx.moveTo(40, 75)ctx.lineTo(160, 75)ctx.moveTo(100, 15)ctx.lineTo(100, 135)ctx.setStrokeStyle('#AAAAAA')ctx.stroke()ctx.setFontSize(12)ctx.setFillStyle('black')ctx.fillText('0', 165, 78)ctx.fillText('0.5*PI', 83, 145)ctx.fillText('1*PI', 15, 78)ctx.fillText('1.5*PI', 83, 10)// Draw pointsctx.beginPath()ctx.arc(100, 75, 2, 0, 2 * Math.PI)ctx.setFillStyle('lightgreen')ctx.fill()ctx.beginPath()ctx.arc(100, 25, 2, 0, 2 * Math.PI)ctx.setFillStyle('blue')ctx.fill()ctx.beginPath()ctx.arc(150, 75, 2, 0, 2 * Math.PI)ctx.setFillStyle('red')ctx.fill()// Draw arcctx.beginPath()ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)ctx.setStrokeStyle('#333333')ctx.stroke()ctx.draw()
The method is used as follows: CanvasContext.arcTo(number x1, number y1, number x2, number y2, number radius)
The method is used as follows: CanvasContext.draw(boolean reserve, function callback)
const ctx = wx.createCanvasContext('myCanvas')ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 100)ctx.draw()ctx.fillRect(50, 50, 150, 100)ctx.draw(true)
The method is utilized as follows: CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)
const ctx = wx.createCanvasContext('myCanvas')wx.chooseImage({success(res) {ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)ctx.draw()}})
The method is utilized as follows: CanvasGradient CanvasContext.createLinearGradient(number x0, number y0, number x1, number y1)
const ctx = wx.createCanvasContext('myCanvas')// Create linear gradientconst grd = ctx.createLinearGradient(0, 0, 200, 0)grd.addColorStop(0, 'red')grd.addColorStop(1, 'white')// Fill with gradientctx.setFillStyle(grd)ctx.fillRect(10, 10, 150, 80)ctx.draw()
The method is utilized as follows: CanvasGradient CanvasContext.createCircularGradient(number x, number y, number r)
const ctx = wx.createCanvasContext('myCanvas')// Create circular gradientconst grd = ctx.createCircularGradient(75, 50, 50)grd.addColorStop(0, 'red')grd.addColorStop(1, 'white')// Fill with gradientctx.setFillStyle(grd)ctx.fillRect(10, 10, 150, 80)ctx.draw()
Value | Note |
repeat | Repeats in both horizontal and vertical directions. |
repeat-x | Repeats in the horizontal direction. |
repeat-y | Repeats in the vertical direction. |
no-repeat | Not repeating |
const ctx = wx.createCanvasContext('myCanvas')constpattern=ctx.createPattern('/path/to/image','repeat-x')ctx.fillStyle=patternctx.fillRect(0,0,300,150)ctx.draw()
The usage of this method is Object CanvasContext.measureText(string text).
Attributes | Types | Note |
width | number | The width of the text. |
const ctx = wx.createCanvasContext('myCanvas')ctx.font = 'italic bold 20px cursive'const metrics = ctx.measureText('Hello World')console.log(metrics.width)
The method is utilized as CanvasContext.save()
const ctx = wx.createCanvasContext('myCanvas')// save the default fill stylectx.save()ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 100)// restore to the previous saved statectx.restore()ctx.fillRect(50, 50, 150, 100)ctx.draw()
The method is utilized as CanvasContext.restore()
const ctx = wx.createCanvasContext('myCanvas')// save the default fill stylectx.save()ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 100)// restore to the previous saved statectx.restore()ctx.fillRect(50, 50, 150, 100)ctx.draw()
The method is utilized as CanvasContext.beginPath()
const ctx = wx.createCanvasContext('myCanvas')// begin pathctx.rect(10, 10, 100, 30)ctx.setFillStyle('yellow')ctx.fill()// begin another pathctx.beginPath()ctx.rect(10, 40, 100, 30)// only fill this rect, not in current pathctx.setFillStyle('blue')ctx.fillRect(10, 70, 100, 30)ctx.rect(10, 100, 100, 30)// it will fill current pathctx.setFillStyle('red')ctx.fill()ctx.draw()
The method is utilized as CanvasContext.closePath()
const ctx = wx.createCanvasContext('myCanvas')ctx.moveTo(10, 10)ctx.lineTo(100, 10)ctx.lineTo(100, 100)ctx.closePath()ctx.stroke()ctx.draw()
const ctx = wx.createCanvasContext('myCanvas')// begin pathctx.rect(10, 10, 100, 30)ctx.closePath()// begin another pathctx.beginPath()ctx.rect(10, 40, 100, 30)// only fill this rect, not in current pathctx.setFillStyle('blue')ctx.fillRect(10, 70, 100, 30)ctx.rect(10, 100, 100, 30)// it will fill current pathctx.setFillStyle('red')ctx.fill()ctx.draw()
The method is utilized as CanvasContext.moveTo(number x, number y)
const ctx = wx.createCanvasContext('myCanvas')ctx.moveTo(10, 10)ctx.lineTo(100, 10)ctx.moveTo(10, 50)ctx.lineTo(100, 50)ctx.stroke()ctx.draw()
The method is utilized as CanvasContext.lineTo(number x, number y)
const ctx = wx.createCanvasContext('myCanvas')ctx.moveTo(10, 10)ctx.rect(10, 10, 100, 50)ctx.lineTo(110, 60)ctx.stroke()ctx.draw()
The method is utilized as CanvasContext.quadraticCurveTo(number cpx, number cpy, number x, number y)
const ctx = wx.createCanvasContext('myCanvas')// Draw pointsctx.beginPath()ctx.arc(20, 20, 2, 0, 2 * Math.PI)ctx.setFillStyle('red')ctx.fill()ctx.beginPath()ctx.arc(200, 20, 2, 0, 2 * Math.PI)ctx.setFillStyle('lightgreen')ctx.fill()ctx.beginPath()ctx.arc(20, 100, 2, 0, 2 * Math.PI)ctx.setFillStyle('blue')ctx.fill()ctx.setFillStyle('black')ctx.setFontSize(12)// Draw guidesctx.beginPath()ctx.moveTo(20, 20)ctx.lineTo(20, 100)ctx.lineTo(200, 20)ctx.setStrokeStyle('#AAAAAA')ctx.stroke()// Draw quadratic curvectx.beginPath()ctx.moveTo(20, 20)ctx.quadraticCurveTo(20, 100, 200, 20)ctx.setStrokeStyle('black')ctx.stroke()ctx.draw()
The method is used as follows: CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
const ctx = wx.createCanvasContext('myCanvas')// Draw pointsctx.beginPath()ctx.arc(20, 20, 2, 0, 2 * Math.PI)ctx.setFillStyle('red')ctx.fill()ctx.beginPath()ctx.arc(200, 20, 2, 0, 2 * Math.PI)ctx.setFillStyle('lightgreen')ctx.fill()ctx.beginPath()ctx.arc(20, 100, 2, 0, 2 * Math.PI)ctx.arc(200, 100, 2, 0, 2 * Math.PI)ctx.setFillStyle('blue')ctx.fill()ctx.setFillStyle('black')ctx.setFontSize(12)// Draw guidesctx.beginPath()ctx.moveTo(20, 20)ctx.lineTo(20, 100)ctx.lineTo(150, 75)ctx.moveTo(200, 20)ctx.lineTo(200, 100)ctx.lineTo(70, 75)ctx.setStrokeStyle('#AAAAAA')ctx.stroke()// Draw quadratic curvectx.beginPath()ctx.moveTo(20, 20)ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)ctx.setStrokeStyle('black')ctx.stroke()ctx.draw()
The method is used as follows: CanvasContext.rect(number x, number y, number width, number height)
const ctx = wx.createCanvasContext('myCanvas')ctx.rect(10, 10, 150, 75)ctx.setFillStyle('red')ctx.fill()ctx.draw()
The method is used as follows: CanvasContext.clip()
const ctx = wx.createCanvasContext('myCanvas')wx.downloadFile({url: 'https://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',success(res) {ctx.save()ctx.beginPath()ctx.arc(50, 50, 25, 0, 2 * Math.PI)ctx.clip()ctx.drawImage(res.tempFilePath, 25, 25)ctx.restore()ctx.draw()}})
The method is used as follows: CanvasContext.stroke()
const ctx = wx.createCanvasContext('myCanvas')ctx.moveTo(10, 10)ctx.lineTo(100, 10)ctx.lineTo(100, 100)ctx.stroke()ctx.draw()
const ctx = wx.createCanvasContext('myCanvas')// begin pathctx.rect(10, 10, 100, 30)ctx.setStrokeStyle('yellow')ctx.stroke()// begin another pathctx.beginPath()ctx.rect(10, 40, 100, 30)// only stoke this rect, not in current pathctx.setStrokeStyle('blue')ctx.strokeRect(10, 70, 100, 30)ctx.rect(10, 100, 100, 30)// it will stroke current pathctx.setStrokeStyle('red')ctx.stroke()ctx.draw()
The method is used as follows: CanvasContext.strokeRect(number x, number y, number width, number height)
const ctx = wx.createCanvasContext('myCanvas')ctx.setStrokeStyle('red')ctx.strokeRect(10, 10, 150, 75)ctx.draw()
The method is used as follows: CanvasContext.strokeText(string text, number x, number y, number maxWidth)
The method is used as follows: CanvasContext.clearRect(number x, number y, number width, number height)
<canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;" />
const ctx = wx.createCanvasContext('myCanvas')ctx.setFillStyle('red')ctx.fillRect(0, 0, 150, 200)ctx.setFillStyle('blue')ctx.fillRect(150, 0, 150, 200)ctx.clearRect(10, 10, 150, 75)ctx.draw()
The method is used as follows: CanvasContext.fill()
const ctx = wx.createCanvasContext('myCanvas')ctx.moveTo(10, 10)ctx.lineTo(100, 10)ctx.lineTo(100, 100)ctx.fill()ctx.draw()
const ctx = wx.createCanvasContext('myCanvas')// begin pathctx.rect(10, 10, 100, 30)ctx.setFillStyle('yellow')ctx.fill()// begin another pathctx.beginPath()ctx.rect(10, 40, 100, 30)// only fill this rect, not in current pathctx.setFillStyle('blue')ctx.fillRect(10, 70, 100, 30)ctx.rect(10, 100, 100, 30)// it will fill current pathctx.setFillStyle('red')ctx.fill()ctx.draw()
The method is used as follows: CanvasContext.fillRect(number x, number y, number width, number height)
const ctx = wx.createCanvasContext('myCanvas')ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 75)ctx.draw()
The method is used as follows: CanvasContext.fillText(string text, number x, number y, number maxWidth)
const ctx = wx.createCanvasContext('myCanvas')
const ctx = wx.createCanvasContext('myCanvas')ctx.setFontSize(20)ctx.fillText('Hello', 20, 20)ctx.fillText('MINA', 100, 100)ctx.draw()
The method is used as follows: CanvasContext.scale(number scaleWidth, number scaleHeight)
const ctx = wx.createCanvasContext('myCanvas')ctx.strokeRect(10, 10, 25, 15)ctx.scale(2, 2)ctx.strokeRect(10, 10, 25, 15)ctx.scale(2, 2)ctx.strokeRect(10, 10, 25, 15)ctx.draw()
The method is used as follows: CanvasContext.rotate(number rotate)
const ctx = wx.createCanvasContext('myCanvas')ctx.strokeRect(100, 10, 150, 100)ctx.rotate(20 * Math.PI / 180)ctx.strokeRect(100, 10, 150, 100)ctx.rotate(20 * Math.PI / 180)ctx.strokeRect(100, 10, 150, 100)ctx.draw()
The method is used as follows: CanvasContext.transform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)
The method is used as follows: CanvasContext.translate(number x, number y)
const ctx = wx.createCanvasContext('myCanvas')ctx.strokeRect(10, 10, 150, 100)ctx.translate(20, 20)ctx.strokeRect(10, 10, 150, 100)ctx.translate(20, 20)ctx.strokeRect(10, 10, 150, 100)ctx.draw()
The method is used as follows: CanvasContext.setTransform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)
The method is used as follows: CanvasContext.setFillStyle(string|CanvasGradient color)
const ctx = wx.createCanvasContext('myCanvas')ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 75)ctx.draw()
The method is used as follows: CanvasContext.setStrokeStyle(string|CanvasGradient color)
const ctx = wx.createCanvasContext('myCanvas')ctx.setStrokeStyle('red')ctx.strokeRect(10, 10, 150, 75)ctx.draw()
The method is used as follows: CanvasContext.setShadow(number offsetX, number offsetY, number blur, string color)
const ctx = wx.createCanvasContext('myCanvas')ctx.setFillStyle('red')ctx.setShadow(10, 50, 50, 'blue')ctx.fillRect(10, 10, 150, 75)ctx.draw()
The method is used as follows: CanvasContext.setGlobalAlpha(number alpha)
const ctx = wx.createCanvasContext('myCanvas')ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 100)ctx.setGlobalAlpha(0.2)ctx.setFillStyle('blue')ctx.fillRect(50, 50, 150, 100)ctx.setFillStyle('yellow')ctx.fillRect(100, 100, 150, 100)ctx.draw()
The method is used as follows: CanvasContext.setLineWidth(number lineWidth)
const ctx = wx.createCanvasContext('myCanvas')ctx.beginPath()ctx.moveTo(10, 10)ctx.lineTo(150, 10)ctx.stroke()ctx.beginPath()ctx.setLineWidth(5)ctx.moveTo(10, 30)ctx.lineTo(150, 30)ctx.stroke()ctx.beginPath()ctx.setLineWidth(10)ctx.moveTo(10, 50)ctx.lineTo(150, 50)ctx.stroke()ctx.beginPath()ctx.setLineWidth(15)ctx.moveTo(10, 70)ctx.lineTo(150, 70)ctx.stroke()ctx.draw()
The method is used as follows: CanvasContext.setLineJoin(string lineJoin)
Value | Note |
bevel | Bevel |
round | Rounded corner |
miter | Sharp corner |
const ctx = wx.createCanvasContext('myCanvas')ctx.beginPath()ctx.moveTo(10, 10)ctx.lineTo(100, 50)ctx.lineTo(10, 90)ctx.stroke()ctx.beginPath()ctx.setLineJoin('bevel')ctx.setLineWidth(10)ctx.moveTo(50, 10)ctx.lineTo(140, 50)ctx.lineTo(50, 90)ctx.stroke()ctx.beginPath()ctx.setLineJoin('round')ctx.setLineWidth(10)ctx.moveTo(90, 10)ctx.lineTo(180, 50)ctx.lineTo(90, 90)ctx.stroke()ctx.beginPath()ctx.setLineJoin('miter')ctx.setLineWidth(10)ctx.moveTo(130, 10)ctx.lineTo(220, 50)ctx.lineTo(130, 90)ctx.stroke()ctx.draw()
The method is used as follows: CanvasContext.setLineCap(string lineCap)
Value | Note |
butt | Adding flat edges to each end of the line |
round | Adding round caps to each end of the line |
square | Adding square caps to each end of the line |
const ctx = wx.createCanvasContext('myCanvas')ctx.beginPath()ctx.moveTo(10, 10)ctx.lineTo(150, 10)ctx.stroke()ctx.beginPath()ctx.setLineCap('butt')ctx.setLineWidth(10)ctx.moveTo(10, 30)ctx.lineTo(150, 30)ctx.stroke()ctx.beginPath()ctx.setLineCap('round')ctx.setLineWidth(10)ctx.moveTo(10, 50)ctx.lineTo(150, 50)ctx.stroke()ctx.beginPath()ctx.setLineCap('square')ctx.setLineWidth(10)ctx.moveTo(10, 70)ctx.lineTo(150, 70)ctx.stroke()ctx.draw()
The method is used as follows: CanvasContext.setLineDash(Array.<number> pattern, number offset)
const ctx = wx.createCanvasContext('myCanvas')ctx.setLineDash([10, 20], 5);ctx.beginPath();ctx.moveTo(0,100);ctx.lineTo(400, 100);ctx.stroke();ctx.draw()
The method is used as follows: CanvasContext.setMiterLimit(number miterLimit)
const ctx = wx.createCanvasContext('myCanvas')ctx.beginPath()ctx.setLineWidth(10)ctx.setLineJoin('miter')ctx.setMiterLimit(1)ctx.moveTo(10, 10)ctx.lineTo(100, 50)ctx.lineTo(10, 90)ctx.stroke()ctx.beginPath()ctx.setLineWidth(10)ctx.setLineJoin('miter')ctx.setMiterLimit(2)ctx.moveTo(50, 10)ctx.lineTo(140, 50)ctx.lineTo(50, 90)ctx.stroke()ctx.beginPath()ctx.setLineWidth(10)ctx.setLineJoin('miter')ctx.setMiterLimit(3)ctx.moveTo(90, 10)ctx.lineTo(180, 50)ctx.lineTo(90, 90)ctx.stroke()ctx.beginPath()ctx.setLineWidth(10)ctx.setLineJoin('miter')ctx.setMiterLimit(4)ctx.moveTo(130, 10)ctx.lineTo(220, 50)ctx.lineTo(130, 90)ctx.stroke()ctx.draw()
The method is used as follows: CanvasContext.setFontSize(number fontSize)
const ctx = wx.createCanvasContext('myCanvas')ctx.setFontSize(20)ctx.fillText('20', 20, 20)ctx.setFontSize(30)ctx.fillText('30', 40, 40)ctx.setFontSize(40)ctx.fillText('40', 60, 60)ctx.setFontSize(50)ctx.fillText('50', 90, 90)ctx.draw()
The method is used as follows: CanvasContext.setTextAlign(string align)
Value | Note |
left | Align Left |
center | Align Center |
right | Align Right |
const ctx = wx.createCanvasContext('myCanvas')ctx.setStrokeStyle('red')ctx.moveTo(150, 20)ctx.lineTo(150, 170)ctx.stroke()ctx.setFontSize(15)ctx.setTextAlign('left')ctx.fillText('textAlign=left', 150, 60)ctx.setTextAlign('center')ctx.fillText('textAlign=center', 150, 80)ctx.setTextAlign('right')ctx.fillText('textAlign=right', 150, 100)ctx.draw()
The method is used as follows: CanvasContext.setTextBaseline(string textBaseline)
Value | Note |
top | Align Top |
bottom | Align Bottom |
middle | Align Center |
normal | Default Value |
const ctx = wx.createCanvasContext('myCanvas')ctx.setStrokeStyle('red')ctx.moveTo(5, 75)ctx.lineTo(295, 75)ctx.stroke()ctx.setFontSize(20)ctx.setTextBaseline('top')ctx.fillText('top', 5, 75)ctx.setTextBaseline('middle')ctx.fillText('middle', 50, 75)ctx.setTextBaseline('bottom')ctx.fillText('bottom', 120, 75)ctx.setTextBaseline('normal')ctx.fillText('normal', 200, 75)ctx.draw()
Was this page helpful?