canvas画圆角矩形

// (x,y):圆角矩形起始坐标; width: 矩形宽度; height: 矩形高度; r: 矩形圆角;
draw(ctx, x, y, width, height, r){
  ctx.beginPath();
  ctx.moveTo(x + r, y);
  ctx.fillStyle = "rgb(61, 193, 254)";//矩形填充颜色
  ctx.lineTo(x + width - r, y);
  ctx.arc(x + width - r, y + r, r, Math.PI*1.5, Math.PI*2);
  ctx.lineTo(x + width, y + height - r);
  ctx.arc(x + width - r, y + height - r, r, 0, Math.PI*0.5);
  ctx.lineTo(x + r, y + height);
  ctx.arc(x + r, y + height - r, r, Math.PI*0.5, Math.PI);
  ctx.lineTo(x, y + r);
  ctx.arc(x + r, y + r, r, Math.PI, Math.PI*1.5);
  ctx.fill();
}