javascript - 网络聊天中的群聊圈子，例如Facebook群聊UI

enter image description here每个人。我正在尝试开发我的大学项目的群聊UI。
但是我发现很难将用户的个人资料图像组合成一个圆圈。
如果没有群组个人资料，我想在圆形框架中添加2或3个用户。我在Google上搜索，并说我要使用画布。我尝试这个。没用如何将两个或多个用户组合成一个圆形框架？
这是我的代码。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var img1 = loadImage('1.png');
var img2 = loadImage('2.png');

var imagesLoaded = 0;
function main() {
imagesLoaded += 1;

if(imagesLoaded == 2) {
    // composite now
    ctx.drawImage(img1, 0, 0);

    ctx.globalAlpha = 0.5;
    ctx.drawImage(img2, 0, 0);
}
}

function loadImage(src, onload) {

var img = new Image();

img.onload = onload;
img.src = src;

return img;
}

最佳答案

如果要使用画布获取，则必须使用globalCompositeOperation：

var c = document.getElementById('c');
var img = new Image();
var ctx = c.getContext("2d");

img.onload = function() {
    ctx.drawImage(img, 0, 0, 308, 308);
    ctx.drawImage(img, 312, 0, 308, 308);
    ctx.drawImage(img, 0, 312, 308, 308);
    ctx.drawImage(img, 312, 312, 308, 308);
}
c.width= 620;
c.height=620;
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(310,310,310,0,2*Math.PI);
ctx.fill();
ctx.globalCompositeOperation='source-atop';
img.src = "http://images.movieplayer.it/images/2015/09/28/avatar-1.jpg";

<canvas  id ="c" ></canvas>

否则，您可以将具有边框半径的类应用于画布：

var c = document.getElementById('c');
var img = new Image();
var ctx = c.getContext("2d");

img.onload = function() {
    ctx.drawImage(img, 0, 0, 308, 308);
    ctx.drawImage(img, 312, 0, 308, 308);
    ctx.drawImage(img, 0, 312, 308, 308);
    ctx.drawImage(img, 312, 312, 308, 308);
}
c.width= 620;
c.height=620;
img.src = "http://images.movieplayer.it/images/2015/09/28/avatar-1.jpg";

.rounded {
  border-radius: 310px;
}

<canvas  id ="c" class="rounded" ></canvas>

关于javascript - 网络聊天中的群聊圈子，例如Facebook群聊UI，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34036036/