[英]Group Chat Circle on Web Chat like a facebook Group Chat UI
大家在這里輸入圖片描述 。 我正在嘗試開發我的大學項目的群聊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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.