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

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

uni.getSystemInfo({success: (res)=> {// res - 各种参数let info = uni.createSelectorQuery().select(".myCanvas");info.boundingClientRect((data)=> {//data - 各种参数this.canvas=datathis.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=10ctx.beginPath()// 因为边缘描边存在锯齿，最好指定使用 transparent 填充ctx.setFillStyle('transparent')// ctx.setStrokeStyle('transparent')// 左上角ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)// border-topctx.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-rightctx.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-bottomctx.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-leftctx.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)