uniapp中canvas将矩形图片绘制成圆形图片以及保存canvas到手机

废话不多说直接上代码
本次是在uniapp中操作的 但是canvas都一样
前提是你已经赋予了canvas宽高了

//先获取你的canvas 
let ctx = uni.createCanvasContext('myCanvas', this);
ctx.save();
ctx.beginPath(); //开始绘制
//先画个圆   x,y是圆心的(x,y） 坐标 r是圆的半径 第四个参数是起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）  第五个参数是结束角，以弧度计  最后是绘图方向  默认是false，即顺时针
ctx.arc(x, y, r, 0, Math.PI * 2, false);
ctx.clip();//画好了圆 开始剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
// drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
//path 是用uni.getImageInfo 获取的地址
ctx.drawImage(path, x, y, width, height); // 推进去图片，必须是https图片
ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制

ctx.draw(true,(ret)=>{ // draw方法 把以上内容画到 canvas 中。
	uni.canvasToTempFilePath({ // 保存canvas为图片
		canvasId: 'myCanvas',
		quality: 1,
		complete: res=> {
		// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
			//this.bg_Url = res.tempFilePath
			
		} ,
	})
});

希望能帮助到你们