# 頭像矩形方法 ~~~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) } }) ~~~ 如圖：