羣聊聊天圈像網絡聊天像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; 
}

來源

2015-12-02 Pyae Sone

不知道你在努力達到什麼樣的目標......像這樣？ https://jsfiddle.net/bxg2Lwa8/ – cwang

crystalwill --- Thx很多。這似乎是好的。我會嘗試。！ –

畫布可以在圓圈內部剪切多個圖像。你可以在你想要實現的圈子中發佈多張照片的示例圖像嗎？ - – markE

如果你想獲得與帆布你有用戶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>

來源

2015-12-02 07:49:59 AndreaBogazzi

羣聊聊天圈像網絡聊天像Facebook羣聊天UI

回答

相關問題