微信小程序canvas绘图_微信小程序canvas教程

微信小程序canvas绘图

1、引入canvas

在页面任意位置引入

如下

	<view style="width: 0px; height: 0px; overflow: hidden">
<canvas class="cards" canvas-id='cards' :style="{ width: '375px', height: '300px' }">
</canvas>
	</view>
1
2
3
4

从而让canvas能够在页面生效且不影响页面的布局

2、定义画布

const ctx = uni.createCanvasContext('cards', this)	//定义画布
	ctx.save()	//开始绘制
	ctx.beginPath() //开始新的路径
	ctx.rect(0, 0, 500, 400) //绘制矩形 四个参数分别为（x轴开始位置，Y轴开始位置，宽，高）
	ctx.drawImage('/static/image/shareTop.png',0, 0, 500, 400)//绘制图片 参数分别为（图片路径，x轴开始位置，Y轴开始位置，宽，高）
	ctx.setFontSize('26')//字号
	ctx.setFillStyle('#ffffff')//颜色
	ctx.setTextAlign('left') // 文字在设定的x位置
	ctx.setTextBaseline('top') //文字在设定的y轴线
	ctx.fillText(`${that.form.name}`, 45, 45)//参数分别为 内容 x轴位置 y轴位置
	ctx.arc(410, 80, 35, 0, 2 * Math.PI)//参数分别为（x轴位置 Y轴位置 半径 起始弧度 终止弧度 ）
	
1
2
3
4
5
6
7
8
9
10
11
12

如若显示圆形图片 则需要图片的X轴 Y轴位置为 绘制圆的X和Y 位置减去半径 宽高为半径二倍

3、小程序绘制网络图片

​ 图片路径需要从网络获取时，需要将图片下载到缓存

​ 又因为方法为异步的 因此要绘制时需要在uni.downloadFile下进行 示例入下

ni.downloadFile({
					url: 'https://gimg3.baidu.com/topone/src=https%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2Feaf81a4c510fd9f9d72a2d09cd60c32a2834349b0e37%3Fx-bce-process%3Dimage%2Fresize%2Cm_pad%2Cw_348%2Ch_348%2Ccolor_ffffff&refer=http%3A%2F%2Fwww.baidu.com&app=2011&size=f200,200&n=0&g=0n&er=404&q=75&fmt=auto&maxorilen2heic=2000000?sec=1699462800&t=e21bd56adfda69fa03776b4eba1143d6',
					succress:(res)=>{
					const file = res.tempFilePath
					const ctx = uni.createCanvasContext('cards', this)
					ctx.save()
					ctx.beginPath()
					ctx.rect(0, 0, 500, 400)
					ctx.setFontSize('26')
					ctx.setFillStyle('#ffffff')
					ctx.setTextAlign('left') // 文字在设定的x位置居中
					ctx.setTextBaseline('top') //文字在设定的y轴线 靠下
					ctx.fillText(`${that.form.name}`, 45, 45)
					ctx.setFontSize('18')
					ctx.drawImage(file,0, 267, 500, 133)
					}
				})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17