群聊聊天圈像网络聊天像Facebook群聊天UI
问题描述:
enter image description here大家。我正在尝试开发我的大学项目的群聊UI。 但我发现很难将用户的个人资料图像合并到一个圈子框架中。 如果没有组配置文件,我想在圆形框架中添加2或3个用户。我在Google上搜索,它说我使用画布。我试试这个。它不起作用。我怎样才能将两个或更多用户组合成一个圆形框架? 这是我的代码。群聊聊天圈像网络聊天像Facebook群聊天UI
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>
不知道你在努力达到什么样的目标......像这样? https://jsfiddle.net/bxg2Lwa8/ – cwang
crystalwill --- Thx很多。这似乎是好的。我会尝试。 ! –
画布可以在圆圈内部剪切多个图像。你可以在你想要实现的圈子中发布多张照片的示例图像吗? - – markE