HTML：canvas画圆形加矩形组合

可以返回十个字以内的图片，矩形随内容长度变化

运行效果：

参数格式：

params = {
    'count':18,
    'content':'哈哈哈',
    'circle':'red',
    'rect':'blue',
    'num':'yellow',
    'text':'black'
};

count：数量

content：文字

circle：圆形填充色

rect：矩形边框色

num：数字颜色

text：文字颜色

function drawCircle(params) {
    let canvas = document.createElement("canvas");
    canvas.width = 300;
    canvas.height = 200;
    let ctx = canvas.getContext('2d');
    let countLeft, contentLeft, rectWidth, rectLeft;
    countLeft = (canvas.clientWidth - params.count.toString().length * 16.7) / 2;
    if (params.content.length <= 6) { rectWidth = 140; }
    else if (params.content.length === 7) { rectWidth = 180; }
    else if (params.content.length === 8) { rectWidth = 200; }
    else if (params.content.length === 9) { rectWidth = 220; }
    else if (params.content.length === 10) { rectWidth = 240; }
    rectLeft = (canvas.clientWidth - rectWidth) / 2;
    contentLeft = (canvas.clientWidth - params.content.length * 20) / 2;
    ctx.strokeStyle = params.rect;
    ctx.strokeRect(rectLeft, 20, rectWidth, 50);
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(150, 135, 60, 0, 2 * Math.PI, false);
    ctx.fillStyle = params.circle;
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.font = '30px bold arial';
    ctx.fillStyle = params.num;
    ctx.fillText(params.count, countLeft, 140);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.font = '20px bold arial';
    ctx.fillStyle = params.text;
    ctx.fillText(params.content, contentLeft, 53);
    ctx.stroke();
    ctx.closePath();
    return canvas;
}