微信小程序canvas绘图

微信小程序canvas绘图

1、引入canvas

在页面任意位置引入

如下

从而让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轴位置 半径 起始弧度 终止弧度 ）

如若显示圆形图片 则需要图片的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)

}

})