小程序 uni canvas绘制圆角图片 圆角矩形

小程序 uni canvas绘制圆角图片 圆角矩形

获取canvas的宽度保证适应屏幕

                let that=this
				uni.getSystemInfo({
				　　success: function(res) { // res - 各种参数
				　　    let info = uni.createSelectorQuery().select(".myCanvas");
				　　　  　info.boundingClientRect(function(data) { //data - 各种参数
				          that.canvas=data
						  that.pross( data)
				　　    }).exec()
				       }
				});

圆角图片

//头像
				ctx.save(); // 先保存状态 已便于画完圆再用
				ctx.beginPath(); //开始绘制
				//先画个圆
				ctx.arc(data.width-50,  50, 25, 0, Math.PI * 2);
				ctx.setFillStyle('#ffffff')
				ctx.fill()//保证图片无bug填充
				ctx.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
				ctx.drawImage(imgUrl, data.width-70,30,50,50) // 推进去图片
				ctx.restore();
				
				ctx.draw();

圆角矩形

				const ctx = uni.createCanvasContext('myCanvas')
				//绘制背景色
				let x=0,y=0,w=data.width,h=data.height,r=10
				 ctx.beginPath()
				 // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
				 ctx.setFillStyle('transparent')
				 // ctx.setStrokeStyle('transparent')
				 // 左上角
				 ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
				 
				 // border-top
				 ctx.moveTo(x + r, y)
				 ctx.lineTo(x + w - r, y)
				 ctx.lineTo(x + w, y + r)
				 // 右上角
				 ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
				 
				 // border-right
				 ctx.lineTo(x + w, y + h - r)
				 ctx.lineTo(x + w - r, y + h)
				 // 右下角
				 ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
				 
				 // border-bottom
				 ctx.lineTo(x + r, y + h)
				 ctx.lineTo(x, y + h - r)
				 // 左下角
				 ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
				 
				 // border-left
				 ctx.lineTo(x, y + r)
				 ctx.lineTo(x + r, y)
				 
				 // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
				 ctx.fill()
				 // ctx.stroke()
				 ctx.closePath()
				 // 剪切
				 ctx.clip()
				ctx.setFillStyle('#ffffff')
				ctx.fillRect(0,0, data.width, data.height)