1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > HTML:canvas画圆形加矩形组合

HTML:canvas画圆形加矩形组合

时间:2021-07-05 19:28:15

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。