「这是我参与2022首次更文挑战的第28天，活动详情查看：2022首次更文挑战」

前言

上一篇已经介绍了部分基础的API，这一篇介绍最后的几个API方法。

图片API

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 起支持注意:
绘制图片如果是本地图片，则可以直接使用绘制，填上路径就好。如果是网络路径，则需要使用getImageInfo,先获取到图片的信息，在通过取path 来绘制。如下图

let avatarParams=await uni.getImageInfo({
					src:this.avatar
				})
 ctx.drawImage(avatarParams[1].path, 20, 20, 50, 50)

动画相关API

scale(number scaleWidth, number scaleHeight)

在调用后，之后创建的路径其横纵坐标会被缩放。多次调用倍数会相乘 number scaleWidth：横坐标缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%)
number scaleHeight：纵坐标轴缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%)

rotate(number rotate)

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

translate(number x, number y)

以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。原点可以用 translate 方法修改。实际就是坐标轴的原点(0,0)变化了，如果接着调用其他绘制方法，那么会在变化后的原点开始计算。

其他API

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

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

setGlobalAlpha(number alpha)

设置全局画笔透明度。

save()

保存绘图上下文。

restore()

恢复之前保存的绘图上下文。一般是save和restore结合使用

 			   const ctx = wx.createCanvasContext('poster')
			    ctx.save()
			    ctx.setFillStyle('blue')
			    ctx.fillRect(20, 20, 200, 100)
			 
			    ctx.restore()
				    ctx.setFillStyle('red')
			    ctx.fillRect(80, 80, 200, 100)
			 
			    ctx.draw()

save是保存一个上下文，可以理解为保存一个画板，然后在这上面绘制一个蓝色的矩形。接着使用restore重置画板，在继续绘制新的东西。

clip`()`

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

	let imgContent=await uni.getImageInfo({
						src:"https://thirdwx.qlogo.cn/mmopen/vi_32/jb4Ov0UXOYqiaXBuibRDFZMttp1JJmyNibxYSw7iaADmk1FxXfdORWVicxFE5JuqqEzD9Asb0S54J4fCVWHpJ75knXw/132"
					})
					
		 const ctx = uni.createCanvasContext('poster')				 
		ctx.save()
		 ctx.beginPath()
		  ctx.arc(100, 100, 50, 0, 2 * Math.PI)//先一个圆形
		ctx.clip()//裁剪圆形
               ctx.drawImage(imgContent[1].path, 50, 50)//绘制图片只能在裁剪的圆形范围内
                   ctx.restore()
		ctx.drawImage(imgContent[1].path, 150,50,100, 100)//未调用clip方法
		ctx.draw()

如图得到结果，剪裁原型头像。

总结

到这里基本canvas的API基本就结束了，我们可以尝试绘制进度条，绘制海报等需求，这些是比较好结合绘制API的场景。

微信小程序绘图API-canvas(三)

前言