探索小程序开发：CanvasContext绘图详解与应用

一、全局

1、draw

CanvasContext.draw(boolean reserve, function callback)


• reserve:本次绘制是否接着上一次绘制。即 reserve 参数为 false&＃xff0c;则在本次调用绘制之前 native 层会先清空画布再继续绘制&＃xff1b;若 reserve 参数为 true&＃xff0c;则保留当前画布上的内容&＃xff0c;本次调用 drawCanvas 绘制的内容覆盖在上面&＃xff0c;默认 false。
• 绘制完成后执行的回调函数

示例&＃xff1a;

const ctx &＃61; wx.createCanvasContext(&＃39;myCanvas&＃39;)ctx.setFillStyle(&＃39;red&＃39;)
ctx.fillRect(10, 10, 150, 100)
ctx.draw()
ctx.fillRect(50, 50, 150, 100)
ctx.draw(true)

2.restore

ctx.restore()


恢复之前保存的绘图上下文。前面一定有save();

3.save

ctx.save()


保存绘图上下文。

二、操作设置

1.开始路径绘制

CanvasContext.beginPath()


开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边
同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置&＃xff0c;以最后一次设置为准。
在最开始的时候相当于调用了一次 beginPath。

2. 关闭路径

CanvasContext.closePath()


关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径&＃xff0c;那之前的路径将不会被渲染。

const ctx &＃61; wx.createCanvasContext(&＃39;myCanvas&＃39;)
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.closePath()
ctx.stroke()
ctx.draw()


3.填充

CanvasContext.fill()


对当前路径中的内容进行填充。默认的填充色为黑色。

const ctx &＃61; wx.createCanvasContext(&＃39;myCanvas&＃39;)
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.fill()
ctx.draw()


4.绘制边框

CanvasContext.stroke()


画出当前路径的边框。默认颜色色为黑色。

const ctx &＃61; wx.createCanvasContext(&＃39;myCanvas&＃39;)
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.stroke()
ctx.draw()


三、样式设置

1. 设置填充颜色

CanvasContext.setFillStyle(string|CanvasGradient color)


填充的颜色&＃xff0c;默认颜色为 black。

const ctx &＃61; wx.createCanvasContext(&＃39;myCanvas&＃39;)
ctx.setFillStyle(&＃39;red&＃39;)
ctx.fillRect(10, 10, 150, 75)
ctx.draw()


2.设置线条宽度

CanvasContext.setLineWidth(number lineWidth)
//lineWidth:线条的宽度&＃xff0c;单位px


示例代码&＃xff1a;

const ctx &＃61; wx.createCanvasContext(&＃39;myCanvas&＃39;)
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()

3.设置线条的交点样式

CanvasContext.setLineJoin(string lineJoin)
//lineJoin 的合法值 bevel:斜角 round&＃xff1a;圆角 miter&＃xff1a;尖角


示例代码

const ctx &＃61; wx.createCanvasContext(&＃39;myCanvas&＃39;)
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(100, 50)
ctx.lineTo(10, 90)
ctx.stroke()ctx.beginPath()
ctx.setLineJoin(&＃39;bevel&＃39;)
ctx.setLineWidth(10)
ctx.moveTo(50, 10)
ctx.lineTo(140, 50)
ctx.lineTo(50, 90)
ctx.stroke()ctx.beginPath()
ctx.setLineJoin(&＃39;round&＃39;)
ctx.setLineWidth(10)
ctx.moveTo(90, 10)
ctx.lineTo(180, 50)
ctx.lineTo(90, 90)
ctx.stroke()ctx.beginPath()
ctx.setLineJoin(&＃39;miter&＃39;)
ctx.setLineWidth(10)
ctx.moveTo(130, 10)
ctx.lineTo(220, 50)
ctx.lineTo(130, 90)
ctx.stroke()ctx.draw()


4.设置线条的端点样式

CanvasContext.setLineCap(string lineCap)
//lineCap 的合法值 butt:向线条的每个末端添加平直的边缘
//round:向线条的每个末端添加圆形线帽
//square:向线条的每个末端添加正方形线帽


lineCap 的合法值
butt:向线条的每个末端添加平直的边缘
round:向线条的每个末端添加圆形线帽
square:向线条的每个末端添加正方形线帽

示例代码

const ctx &＃61; wx.createCanvasContext(&＃39;myCanvas&＃39;)
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(150, 10)
ctx.stroke()ctx.beginPath()
ctx.setLineCap(&＃39;butt&＃39;)
ctx.setLineWidth(10)
ctx.moveTo(10, 30)
ctx.lineTo(150, 30)
ctx.stroke()ctx.beginPath()
ctx.setLineCap(&＃39;round&＃39;)
ctx.setLineWidth(10)
ctx.moveTo(10, 50)
ctx.lineTo(150, 50)
ctx.stroke()ctx.beginPath()
ctx.setLineCap(&＃39;square&＃39;)
ctx.setLineWidth(10)
ctx.moveTo(10, 70)
ctx.lineTo(150, 70)
ctx.stroke()ctx.draw()


5.设置字体的字号

CanvasContext.setFontSize(number fontSize)


示例代码

const ctx &＃61; wx.createCanvasContext(&＃39;myCanvas&＃39;)ctx.setFontSize(20)
ctx.fillText(&＃39;20&＃39;, 20, 20)
ctx.setFontSize(30)
ctx.fillText(&＃39;30&＃39;, 40, 40)
ctx.setFontSize(40)
ctx.fillText(&＃39;40&＃39;, 60, 60)
ctx.setFontSize(50)
ctx.fillText(&＃39;50&＃39;, 90, 90)ctx.draw()

四、绘制操作

1.绘制线

CanvasContext.lineTo(number x, number y)


增加一个新点&＃xff0c;然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条
参数

示例代码

const ctx &＃61; wx.createCanvasContext(&＃39;myCanvas&＃39;)
ctx.moveTo(10, 10)
ctx.rect(10, 10, 100, 50)
ctx.lineTo(110, 60)
ctx.stroke()
ctx.draw()


2.绘制矩形

CanvasContext.rect(number x, number y, number width, number height)


创建一个矩形路径。需要用 fill 或者 stroke 方法将矩形真正的画到 canvas 中
参数

示例代码

const ctx &＃61; wx.createCanvasContext(&＃39;myCanvas&＃39;)
ctx.rect(10, 10, 150, 75)
ctx.setFillStyle(&＃39;red&＃39;)
ctx.fill()
ctx.draw()


3.绘制圆弧

CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)


参数:

number x
圆心的 x 坐标number y
圆心的 y 坐标number r
圆的半径number sAngle
起始弧度&＃xff0c;单位弧度&＃xff08;在3点钟方向&＃xff09;number eAngle
终止弧度boolean counterclockwise
弧度的方向是否是逆时针


示例代码&＃xff1a;

onst ctx &＃61; wx.createCanvasContext(&＃39;myCanvas&＃39;)// Draw coordinates
ctx.arc(100, 75, 50, 0, 2 * Math.PI)
ctx.setFillStyle(&＃39;#EEEEEE&＃39;)
ctx.fill()ctx.beginPath()
ctx.moveTo(40, 75)
ctx.lineTo(160, 75)
ctx.moveTo(100, 15)
ctx.lineTo(100, 135)
ctx.setStrokeStyle(&＃39;#AAAAAA&＃39;)
ctx.stroke()ctx.setFontSize(12)
ctx.setFillStyle(&＃39;black&＃39;)
ctx.fillText(&＃39;0&＃39;, 165, 78)
ctx.fillText(&＃39;0.5*PI&＃39;, 83, 145)
ctx.fillText(&＃39;1*PI&＃39;, 15, 78)
ctx.fillText(&＃39;1.5*PI&＃39;, 83, 10)// Draw points
ctx.beginPath()
ctx.arc(100, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle(&＃39;lightgreen&＃39;)
ctx.fill()ctx.beginPath()
ctx.arc(100, 25, 2, 0, 2 * Math.PI)
ctx.setFillStyle(&＃39;blue&＃39;)
ctx.fill()ctx.beginPath()
ctx.arc(150, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle(&＃39;red&＃39;)
ctx.fill()// Draw arc
ctx.beginPath()
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
ctx.setStrokeStyle(&＃39;#333333&＃39;)
ctx.stroke()ctx.draw()


4.创建三次方贝塞尔曲线

CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)


参数&＃xff1a;

number cp1x
第一个贝塞尔控制点的 x 坐标number cp1y
第一个贝塞尔控制点的 y 坐标number cp2x
第二个贝塞尔控制点的 x 坐标number cp2y
第二个贝塞尔控制点的 y 坐标number x
结束点的 x 坐标number y
结束点的 y 坐标


示例代码:

const ctx &＃61; wx.createCanvasContext(&＃39;myCanvas&＃39;)// Draw points
ctx.beginPath()
ctx.arc(20, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle(&＃39;red&＃39;)
ctx.fill()ctx.beginPath()
ctx.arc(200, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle(&＃39;lightgreen&＃39;)
ctx.fill()ctx.beginPath()
ctx.arc(20, 100, 2, 0, 2 * Math.PI)
ctx.arc(200, 100, 2, 0, 2 * Math.PI)
ctx.setFillStyle(&＃39;blue&＃39;)
ctx.fill()ctx.setFillStyle(&＃39;black&＃39;)
ctx.setFontSize(12)// Draw guides
ctx.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(&＃39;#AAAAAA&＃39;)
ctx.stroke()// Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
ctx.setStrokeStyle(&＃39;black&＃39;)
ctx.stroke()ctx.draw()


5.绘制文本

CanvasContext.fillText(string text, number x, number y, number maxWidth)


参数&＃xff1a;

string text
在画布上输出的文本number x
绘制文本的左上角 x 坐标位置number y
绘制文本的左上角 y 坐标位置number maxWidth
需要绘制的最大宽度&＃xff0c;可选


示例代码&＃xff1a;

const ctx &＃61; wx.createCanvasContext(&＃39;myCanvas&＃39;)ctx.setFontSize(20)
ctx.fillText(&＃39;Hello&＃39;, 20, 20)
ctx.fillText(&＃39;MINA&＃39;, 100, 100)ctx.draw()