当前位置: 首页 > Web前端 > HTML5

如何使用js结合h5绘制多个头像的组合

时间:2023-04-05 01:35:22 HTML5

有时候,我们需要展示一个由很多用户组成的头像,比如按钮的讨论组头像,微信群头像,下面是一个简单的实现方法:首先,获取你需要的头像图片的地址,保存在一个对象中,例如:vardata=[];然后可以限制最大合并图片的数量,比如限制为四张,然后判断数据库中的图片数量是否大于4,如果大于4,则取前四张,如果不是大于4,则全部拿走。然后,看注释:varbase64=[];//用于安装合成图片varc=document_createElement_x_x('canvas');//创建一个画布varctx=c.getContext('2d');//返回一个在画布上绘制的二维环境varlen=data.length;//获取需要合并的头像图片数量vara=0;//初始化需要合成的头像长度varb=0;//初始化需要组合头像的宽度c.width=290;//定义画布的宽度c.height=290;//定义画布的高度ctx.rect(0,0,c.width,c.height);//画一个矩形ctx.fillStyle='#fff';//设置矩形颜色ctx.fill();//关闭并填充路径接下来需要写一个函数开始绘制:functiondrawing(n){//传入的参数n是一个数字,0表示绘制第一张图,1表示第二张图片。这里先根据不同的需要设置a和b的大小。在这里,我以4张图片为限。设定为,当n=0时,a=b=40;当n=1,a=150,b=40,当n=2,a=40,b=150,当n=3,a=b=150if(n9){l恩=9;}//长度=8;变量a=0;变量b=0;变量k=80;变量l=80;如果(len>4){k=60;l=60;}canvas.width=290;canvas.height=290;context.rect(0,0,canvas.width,canvas.height);context.fillStyle='#fff';context.fill();functiondrawing(n){if(n