本文共 1573 字，大约阅读时间需要 5 分钟。

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

运行效果：

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;}

转载地址：https://kaisarh.blog.csdn.net/article/details/105826213 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！