1.繪制無填充色圓角矩形（這里主要是線條繪制）

function roundRect(ctx,x,y,w,h,r){  //繪制圓角矩形(無填充色))
  ctx.save();
  if(w < 2 * r){
    r = w / 2;
  }
  if(h < 2 * r){
    r = h / 2;
  }
  ctx.beginPath();
  ctx.setFillStyle("#ccc");
  ctx.setStrokeStyle('#111');
  ctx.setFillStyle("#ccc");
  ctx.setLineWidth(1);
  ctx.setFillStyle("#ccc");
  ctx.moveTo(x + r , y);
  ctx.arcTo(x + w, y, x + w, y + h, r);
  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.stroke();
  ctx.closePath();
}

2.繪制有填充色圓角矩形 （通過setLineJoin設(shè)置交點(diǎn)樣式）

function roundRectColor(context, x, y, w, h, r) {  //繪制圓角矩形（純色填充）
  context.save();
  context.setFillStyle("#abc"); 
  context.setStrokeStyle('#abc')
  context.setLineJoin('round');  //交點(diǎn)設(shè)置成圓角
  context.setLineWidth(r);
  context.strokeRect(x + r/2, y + r/2, w - r , h - r );
  context.fillRect(x + r, y + r, w - r * 2, h - r * 2);
  context.stroke();
  context.closePath();
}

調(diào)用：

let context = wx.createCanvasContext('mycanvas'); //搞一塊畫板
context.setFillStyle("#fff"); //設(shè)置純色填充
context.fillRect(0, 0, 335, 556);

roundRectColor(context,200, 20, 100, 100,16);
roundRect(context, 20, 20, 100, 100, 16);

效果：

捕獲.PNG

//移動端
function roundRectColor(context, x, y, w, h, r) {  //繪制圓角矩形（純色填充）
  context.save();
  context.fillStyle = "#fff";
  context.strokeStyle = '#fff';
  context.lineJoin = 'round';  //交點(diǎn)設(shè)置成圓角
  context.lineWidth = r;
  context.strokeRect(x + r/2, y + r/2, w - r , h - r );
  context.fillRect(x + r, y + r, w - r * 2, h - r * 2);
  context.stroke();
  context.closePath();
}

另，記錄一個(gè)遇到的報(bào)錯
1.安卓機(jī):
tempFilePath:create bitmap failed
2.ios:
tempFilePath:failed no image;
網(wǎng)上的延時(shí)什么的都寫了，還報(bào)錯，原因是canvas不能用 display:none