可以返回十个字以内的图片,矩形随内容长度变化
运行效果:
参数格式:
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;}