var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.font = "16px PingFangSC-Regular";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillStyle = "#fff";
  var config = {
    paddingLeft: 20, // 文本左内边距
    paddingRight: 20, // 文本右内边距
    labelHeight: 50, // 标签高度
    labelRadius: 5, // 圆角
    labelBackgroundColor: "#ff6a61" // 标签背景色
  };
  var x = 100;
  var y = 100;
  var str = "快狗打车";
  var textWidth = ctx.measureText(str).width;
  drawRoundRect( ctx, x, y, textWidth + config.paddingLeft + config.paddingRight, config.labelHeight, config.labelRadius, config.labelBackgroundColor);
  ctx.fillText( str, x + config.paddingLeft + textWidth / 2, y + config.labelHeight / 2 );
  var x = 100;
  var y = 200;
  var str = "快狗打车-前端团队";
  var textWidth = ctx.measureText(str).width;
  drawRoundRect( ctx, x, y, textWidth + config.paddingLeft + config.paddingRight, config.labelHeight, config.labelRadius, config.labelBackgroundColor);
  ctx.fillText( str, x + config.paddingLeft + textWidth / 2, y + config.labelHeight / 2 );

var labelList = [
  { "id": 1, "name": "小型面包" },
  { "id": 2, "name": "金杯" },
  { "id": 3, "name": "依维柯" },
  { "id": 4, "name": "商务车" },
  { "id": 5, "name": "皮卡" },
  { "id": 6, "name": "冷藏车" },
  { "id": 7, "name": "平板货车" },
  { "id": 8, "name": "高栏货车" },
  { "id": 9, "name": "宽体尾板" },
  { "id": 10, "name": "厢式货车" },
  { "id": 11, "name": "其它" }
]
var config = {
  // 标签范围参数
  spaceX: 0, // x坐标
  spaceY: 0, // y坐标
  spaceWidth: 300, // 宽度
  spaceHeight: 300, // 高度
  // 标签参数
  paddingRight: 10, // 文本至左边框距离
  paddingLeft: 10, // 文本至右边框距离
  marginTop: 0, // 上外边界
  marginRight: 10, // 右外边界
  marginBottom: 10, // 下外边界
  marginLeft: 0, // 左外边界
  labelHeight: 30, // 高度
  labelRadius: 5, // 圆角
  labelBackgroundColor: '#ff6a61', // 背景色
  // 字体参数
  fontSize: 12, // 字体大小
  fontColor: '#fff', // 字体颜色
  fontFamily: 'PingFangSC-Regular', // 字体类型
}

function formatLine(ctx, list, config) {
  let labelLine = [];
  let lineIndex = 0;
  let usedWidth = 0;
  list.forEach(item => {
    item.textWidth = ctx.measureText(item.name).width; // 文字占据空间
    let labelSpace = item.textWidth + config.paddingLeft + config.paddingRight + config.marginLeft + config.marginRight; // 标签实际占据宽度
    if(usedWidth + labelSpace > config.spaceWidth) {
      usedWidth = 0;
      lineIndex = lineIndex + 1;
    }
    item.x = config.spaceX + usedWidth + config.marginLeft;
    item.y = config.spaceY + lineIndex * (config.labelHeight + config.marginTop + config.marginBottom) + config.marginTop;
    labelLine.push(item);
    usedWidth = usedWidth + labelSpace;
  });
  return labelLine
}

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
// 填充背景色，以便于观察边界
ctx.fillStyle = "#ccc";  
ctx.fillRect(config.spaceX, config.spaceY, config.spaceWidth, config.spaceHeight);
let labelLine = formatLine(ctx, labelList, config);
drawLabel(ctx, labelLine, config);
function drawLabel(ctx, labelLine, config) {
  ctx.font = `${config.fontSize}px ${config.fontFamily}`;
  ctx.textAlign = "center";
  ctx.textBaseline = 'middle';
  ctx.fillStyle = config.fontColor;
  labelLine.map((item)=>{
    drawRoundRect(ctx, item.x, item.y, item.textWidth + config.paddingLeft + config.paddingRight , config.labelHeight , config.labelRadius , config.labelBackgroundColor);
    ctx.fillText(item.name, item.x + config.paddingLeft + item.textWidth/2, item.y + config.labelHeight/2);
  })
}

function measureTextHeight(ctx, x, y, width, height) {
  // 从画布获取像素数据
  var data = ctx.getImageData(x, y, width, height).data,
    first = false,
    last = false,
    r = height,
    c = 0;
  // 找到最后一行非白色像素
  while (!last && r) {
    r--;
    for (c = 0; c < width; c++) {
      if (data[r * width * 4 + c * 4 + 3]) {
        last = r;
        break;
      }
    }
  }
  // 找到第一行非白色像素
  while (r) {
    r--;
    for (c = 0; c < width; c++) {
      if (data[r * width * 4 + c * 4 + 3]) {
        first = r;
        break;
      }
    }
    if (first != r) return last - first;
  }
  return 0;
}