# 头像矩形方法 ~~~cpp drawRoundRect (ctx,r,x,y,w,h,img) { ctx.save() if (w < 2 * r) r = w / 2 if (h < 2 * r) r = h / 2 ctx.beginPath() ctx.moveTo(x+r, y) ctx.arcTo(x+w, y, x+w, y+h, r)//右上角，设置r为0则变为直角 ctx.arcTo(x+w, y+h, x, y+h, r)//右下角 ctx.arcTo(x, y+h, x, y, r)//左下角 ctx.arcTo(x, y, x+w, y, r)//左上角 ctx.closePath(); ctx.clip() ctx.drawImage(img, x, y, w, h) ctx.restore() // 返回上一状态 }, ~~~ # 图片上方两角为圆角，下方两角不为圆角的设置过程 可对比和上一个方法的区别 把右下角、左下角的r设置为0 ~~~cpp drawRoundRect (ctx,r,x,y,w,h,img) { ctx.save() if (w < 2 * r) r = w / 2 if (h < 2 * r) r = h / 2 ctx.beginPath() ctx.moveTo(x+r, y) ctx.arcTo(x+w, y, x+w, y+h, r)//右上角，设置r为0则变为直角 ctx.arcTo(x+w, y+h, x, y+h, 0)//右下角 ctx.arcTo(x, y+h, x, y, 0)//左下角 ctx.arcTo(x, y, x+w, y, r)//左上角 ctx.closePath(); ctx.clip() ctx.drawImage(img, x, y, w, h) ctx.restore() // 返回上一状态 }, ~~~ # 画圆形头像方法 ~~~jsx function drawRound (ctx,r,x,y,img) { ctx.save() // 保存之前的 var r = r // 半径*屏幕分辨率比例 var d = 2*r // 直径 var cx = x + r // 圆弧坐标x var cy = y + r // 圆弧坐标 y ctx.arc(cx, cy, r ,0, 2*Math.PI) ctx.clip() // 裁剪 ctx.drawImage(img, x, y, d, d) // 画头像 ctx.restore() // 返回上一状态 } ~~~ ~~~jsx <view class="canvasBox"> <canvas canvas-id="myCanvas" style="width: 1000rpx; height: {{canvasHeight}}rpx;"></canvas> </view> var ctx = wx.createCanvasContext('myCanvas'); var that = this; wx.getImageInfo({ //网图地址 src: imgurl, success(res){ var r = 10 var x = 45 var y = 780 var w = 50 var h = 50 that.drawRoundRect(ctx,r,x,y,w,h,res.path) } }) ~~~ 如图：