前言

最新项目中需要用到微信小程序（下文统称小程序）绘图相关的功能，今天就将小程序绘图相关的API学习和记录下。

使用姿势

说起绘图当然少不了我们的主角canvas。在小程序中使用canvas绘图时分为以下几个步骤：

• 在wxml中放置一个canvas控件，并设置好大小和唯一id

// wxml文件
...
<canvas style="width:750rpx; height:300rpx;" canvas-id='canvas'></canvas>
...

• 在js中获取canvas

// js文件
...
const ctx = wx.createCanvasContext('canvas')
...

• 调用CanvasContext相关的api来进行绘图

// js文件
...
ctx.xxx()
...

最终会根据我们调用不同的api显示不同的绘制效果，接下啦就让我们一起来看下常用的这些API。

常用API（以下API都是通过CanvasContext对象进行调用）

• 颜色、样式

setFillStyle(string|CanvasGradient color)

设置填充色，可以设置String类型和CanvasGradient类型颜色值

fill()

对当前路径进行填充

setStrokeStyle(string color)

设置描边颜色

stroke

对当前路劲进行描边

以上两对API通常成对配合使用，用以辅助其他API来实现各种不同效果

• 矩形

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

创建一个矩形路径。需要用 fill 或者 stroke 方法将矩形真正的画到 canvas 中
参数含义：
number x：矩形路径左上角的横坐标
number y：矩形路径左上角的纵坐标
number width：矩形路径的宽度
number height：矩形路径的高度

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')ctx.rect(10, 10, 150, 75)ctx.setFillStyle('red')ctx.fill()ctx.draw()
...

fillRect(number x, number y, number width, number height)

填充一个矩形。用 setFillStyle 设置矩形的填充色，如果没设置默认是黑色。
参数含义：同上

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 75)ctx.draw()
...

效果同上

strokeRect(number x, number y, number width, number height)

画一个矩形(非填充)。 用 setStrokeStyle 设置矩形线条的颜色，如果没设置默认是黑色。

参数含义：同上

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')ctx.setStrokeStyle('red')ctx.strokeRect(10, 10, 150, 75)ctx.draw()
...

通过使用rect()和stroke()这两个api也能实现同样效果哦

clearRect(number x, number y, number width, number height)

在给定的矩形区域内，清除画布上的像素

参数含义：同上

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')ctx.rect(10, 10, 150, 75)ctx.setFillStyle('red')ctx.fill()ctx.clearRect(20, 20, 50, 30)ctx.draw()
...

• 路径

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

创建一条弧线

• 创建一个圆可以指定起始弧度为 0，终止弧度为 2 * Math.PI
• 用 stroke 或者 fill 方法来在 canvas 中画弧线。

参数含义：
number x：圆心的 x 坐标
number y：圆心的 y 坐标
number r：圆的半径
number sAngle：起始弧度，单位弧度（在3点钟方向）
number eAngle：终止弧度
boolean counterclockwise：弧度的方向是否是逆时针

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')ctx.arc(100, 75, 50, 0, 1.5*Math.PI,false)ctx.setStrokeStyle('#FF0000')ctx.stroke()ctx.draw()ctx.arc(200, 75, 50, 0, 1.5 * Math.PI, true)ctx.setFillStyle('#FF0000')ctx.fill()ctx.draw(true)//true表示保留之前绘制内容
...

beginPath()

开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

• 在最开始的时候相当于调用了一次 beginPath。
• 同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置，以最后一次设置为准

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')// begin pathctx.rect(10, 10, 100, 30)ctx.setFillStyle('yellow')ctx.fill()// begin another pathctx.beginPath()ctx.rect(10, 40, 100, 30)ctx.setFillStyle('blue')ctx.fill()ctx.draw()
...

moveTo(number x, number y)

把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条

参数含义：
number x：目标位置的 x 坐标
number y：目标位置的 y 坐标

lineTo(number x, number y)

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

参数含义：
number x：目标位置的 x 坐标
number y：目标位置的 y 坐标

closePath()

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

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')ctx.moveTo(10, 10)ctx.lineTo(100, 10)ctx.lineTo(100, 100)ctx.closePath()ctx.stroke()ctx.draw()
...

quadraticCurveTo(number cpx, number cpy, number x, number y)

创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。

参数含义：
number cpx：贝塞尔控制点的 x 坐标
number cpy：贝塞尔控制点的 y 坐标
number x：结束点的 x 坐标
number y：结束点的 y 坐标

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')// 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()
...

针对 moveTo(20, 20) quadraticCurveTo(20, 100, 200, 20) 的三个关键坐标如下：

• 红色：起始点(20, 20)
• 蓝色：控制点(20, 100)
• 绿色：终止点(200, 20)

bezierCurveTo(number cpx1, number cpy1,number cpx2, number cpy2, number x, number y)

创建三次方贝塞尔曲线路径。

参数含义：
number cpx1：贝塞尔控制点1的 x 坐标
number cpy1：贝塞尔控制点1的 y 坐标
number cpx2：贝塞尔控制点3的 x 坐标
number cpy3：贝塞尔控制点3的 y 坐标
number x：结束点的 x 坐标
number y：结束点的 y 坐标

示例

// js文件
...// 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()
...

针对 moveTo(20, 20) bezierCurveTo(20, 100, 200, 100, 200, 20) 的三个关键坐标如下：

• 红色：起始点(20, 20)
• 蓝色：两个控制点(20, 100) (200, 100)
• 绿色：终止点(200, 20)

实际项目中我们能通过贝塞尔曲线实现更加复杂和炫酷的效果

• 文字

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

在画布上绘制被填充的文本

参数含义：
string text：在画布上输出的文本
number x：绘制文本的左上角 x 坐标位置
number y：绘制文本的左上角 y 坐标位置
number maxWidth：需要绘制的最大宽度，可选

setFontSize(number fontSize)

设置字体的字号

setTextBaseline(string textBaseline)

设置文字的竖直对齐

参数含义：
textBaseline取值
top 顶部对齐
bottom 底部对齐
middle 居中对齐
normal 默认值

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')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()
...

setTextAlign(string align)

设置文字的对齐

参数含义：
align取值
left 左对齐
center 居中对齐
right 右对齐

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')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()
...

measureText(string text)

测量文本尺寸信息。目前仅返回文本宽度。同步接口。

• 图片

drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)

参数含义：
string imageResource：所要绘制的图片资源
number sx：源图像的矩形选择框的左上角 x 坐标
number sy：源图像的矩形选择框的左上角 y 坐标
number sWidth：源图像的矩形选择框的宽度
number sHeight：源图像的矩形选择框的高度
number dx：图像的左上角在目标 canvas 上 x 轴的位置
number dy：图像的左上角在目标 canvas 上 y 轴的位置
number dWidth：在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放
number dHeight：在目标画布上绘制图像的高度，允许对绘制的图像进行缩放

有三个版本的写法：

• drawImage(imageResource, dx, dy)
• drawImage(imageResource, dx, dy, dWidth, dHeight)
• drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持

这里不做代码示例，调用时按需传入对应参数即可

• 变形

scale(number scaleWidth, number scaleHeight)

在调用后，之后创建的路径其横纵坐标会被缩放。多次调用倍数会相乘

参数含义：
number scaleWidth：横坐标缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%)
number scaleHeight：纵坐标轴缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%)

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')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()
...

rotate(number rotate)

以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。原点可以用 translate 方法修改

参数含义：
number rotate：旋转角度，以弧度计 degrees * Math.PI/180；degrees 范围为 0-360

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')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()
...

translate(number x, number y)

对当前坐标系的原点 (0, 0) 进行变换。默认的坐标系原点为页面左上角。

参数含义：
number x：水平坐标平移量
number y：竖直坐标平移量

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')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()
...

• 线条样式

setLineWidth(number lineWidth)

设置线条的宽度

setLineCap(string lineCap)

设置线条的端点样式

参数含义：
lineCap 的合法值
butt 向线条的每个末端添加平直的边缘。
round 向线条的每个末端添加圆形线帽。
square 向线条的每个末端添加正方形线帽。（和butt效果差不多，会比butt效果略长）

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')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()
...

setLineJoin(string lineJoin)

设置线条的交点样式

参数含义：
lineJoin 的合法值
bevel 斜角
round 圆角
miter 尖角

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')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()
...

setMiterLimit(number miterLimit)

设置最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。当 CanvasContext.setLineJoin() 为 miter 时才有效。超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示。

参数含义：
number miterLimit：最大斜接长度

• 其他

setShadow(number offsetX, number offsetY, number blur, string color)

设定阴影样式。

参数含义：
number offsetX：阴影相对于形状在水平方向的偏移，默认值为 0。
number offsetY：阴影相对于形状在竖直方向的偏移，默认值为 0。
number blur：阴影的模糊级别，数值越大越模糊。范围 0- 100。，默认值为 0。
string color：阴影的颜色。默认值为 black。

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')ctx.setFillStyle('red')
ctx.setShadow(10, 50, 50, 'blue')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()
...

setGlobalAlpha(number alpha)

设置全局画笔透明度。

save()

保存绘图上下文。

restore()

恢复之前保存的绘图上下文。

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')// 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()
...

clip()

从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存，并在以后的任意时间通过restore方法对其进行恢复。

示例

// js文件
...const ctx = wx.createCanvasContext('canvas')wx.downloadFile({url: 'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',success: function (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.drawImage(res.tempFilePath, 100,25,50, 50)//未调用clip方法ctx.draw()}})
...

尾巴

以上就上小程序绘图中常用到的API，本文参考了微信小程序官方文档进行归总，文章中有出现错误，欢迎指正。如果你喜欢我的文章，欢迎给我留言点赞，谢谢！

微信小程序Canvas绘图API相关推荐

1. 微信小程序 | canvas绘图

   1.新的尺寸单位 rpx rpx(responsive pixel): 可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则 ...

2. 微信小程序canvas绘图功能小例子

   canvas基本功能介绍 01canvas组件 在wxml页面直接使用canvas来调用组件,canvas的默认宽高为300px*225px,如果要使得画布根据屏幕尺寸变化,可以在js文件中利用get ...

3. 微信小程序canvas绘图 绘图完成保存图片 附带代码和效果图

   保存图片的页面 保存下来的图片 以上就是效果图啦, 接下来就是怎么实现它了 首先定义canvas的大小,绘制图片以及文字的布局 将canvas内容生成图片并保存到相册和本地 上代码啦!!自行解析 wx ...

4. 微信小程序 canvas 绘图问题

   https://www.cnblogs.com/heniu/p/9279895.html 转载于:https://www.cnblogs.com/MyNodeJs/p/9961656.html

5. 微信小程序 Canvas drawImage()绘图头像二维码 安卓用户显示半透明！

   微信小程序 Canvas drawImage() 图片在安卓显示为半透明 我遇到的是drawImage()方法绘制 头像和二维码 时开发工具测试没问题 真机测试则出现以下样式 具体问题不太清楚,有可能 ...

6. 微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）

   微信小程序 canvas type=2d 使用心得 为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...

7. 微信小程序 | canvas为你的天气预报添加雨雪效果

   在 Canvas 开发中,经常会提到粒子系统,使用粒子系统可以模拟出火.雾.云.雪等抽象视觉效果.它是HTML5新增的为页面添加多样化效果的绝佳实践. 正巧最近做的一个天气类微信小程序紧接尾声,寻思着 ...

8. 用python画圆角矩形_详解微信小程序canvas圆角矩形的绘制的方法

   详解微信小程序canvas圆角矩形的绘制的方法 发布时间:2020-10-04 18:20:31 来源:脚本之家 阅读:103 作者:清夜 微信小程序允许对普通元素通过 border-radius 的 ...

9. canvas 圆角矩形填充_详解微信小程序canvas圆角矩形的绘制的方法

   微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方 ...

最新文章

1. 推荐几篇介绍Windows CE 6.0的文章
2. 查找所有的（字符相同但顺序不同） Find All Anagrams in a String
3. python3 字符串转数组 数组转字符串 切片操作
4. 10-05索引的创建和使用
5. Tomcat catalina.bat 原理解析
6. 正则表达式零宽断言详解
7. Apache Shiro第1部分–基础
8. [转载] 快速学习-Mybatis框架概述
9. c#devexpres窗体划分 以及panelcontrol 相关操作
10. LeetCode-----重建二叉树
11. Java排序算法——插入排序
12. HTML 基础之 学生信息表
13. mdx词典包_译者的电子工具——手机词典上篇
14. MIUI12系统如何刷入开发版获得ROOT权限
15. YS-LDV7语音识别模块使用手册
16. 汉信码生成和识别SDK
17. 在哪买虚拟服务器,虚拟服务器是购买哪种
18. 运放输入偏置电流方向_运放中输入偏置电流和输入失调电流的区别
19. 计算机学报在线阅读,含指针程序的单子切片方法-计算机学报.pdf
20. clickhouse 报错 “Unmatched parentheses: (“ 或者报错 “Expected one of: CODEC, NULL, ALIAS, TTL, ClosingR

热门文章

1. mysql vip的作用_MySQL-MHA的vip功能笔记day16
2. 说明HTML中标签script的作用,htmlscript标签怎么用
3. 幼儿抽象逻辑思维举例_哈啰思维幼儿数学逻辑思维app下载-哈啰思维幼儿数学逻辑思维手机版 v1.0.1...
4. C++ Eigen类
5. 设计算法，在1~9这九个数之间添加任意加减乘除号，使之等于100
6. 佛前的虔诚，千年回眸
7. 飞智八爪鱼2/安卓模拟器/PC/蓝牙手柄使用
8. 显著性检测学习笔记（3）：CPFP_CVPR_2019
9. 刷题术语简称：OJ、AC、WA、TLE、OLE、MLE、RE、PE、CE分别代表的意思
10. linux ec20 usb驱动移植,linux下EC20 4G模块驱动移植