2、重要的是js部分，這里面有幾個(gè)部分

• 在點(diǎn)擊按鈕時(shí)隱藏掉本來(lái)的頁(yè)面，顯示畫(huà)布生成的圖片

• canvas.width，canvas.height是設(shè)置你生成的圖片的大小。舉個(gè)例子：如果我在canvas的html標(biāo)簽里面設(shè)置的width=750，height=1180，但是在js里面設(shè)置了canvas.width=500，canvas.height=500，那么生成的圖片的大小就會(huì)是500*500.

• 使用createPattern來(lái)制作圖片的背景圖

• 使用drawImage()來(lái)制作組成圖片的小元素也就是紅、黃、藍(lán)、綠、紫那幾張圖片

• 最后用toDataURL()將畫(huà)布的內(nèi)容轉(zhuǎn)為圖片并且渲染到頁(yè)面上

$('.btn').click(function() {
 $('.pho-bg').hide();
 // $('#myCanvas').show();
 var man1 = document.getElementById("man-1"),
 man2 = document.getElementById("man-2"),
 man3 = document.getElementById("man-3"),
 man4 = document.getElementById("man-4"),
 sen1 = document.getElementById("sen1"),
 btn1 = document.getElementById("btn1"),
 canvasBg = document.getElementById("bg1");
 
 
 var canvas = document.getElementById("myCanvas");
 ctx = canvas.getContext("2d");
 canvas.width = 750;
 canvas.height = 1180;
 // 制作背景圖
 var patBg = ctx.createPattern(canvasBg, "repeat");
 ctx.rect(0, 0, 750, 1180);
 ctx.fillStyle = patBg;
 ctx.fill();
 // 將man1,man2,man3,man4,sen1,btn加入畫(huà)布
 ctx.drawImage(man1, 0, 0, 341, 474);
 ctx.drawImage(man2, 410, 0, 341, 474);
 ctx.drawImage(man3, 0, 474, 341, 474);
 ctx.drawImage(man4, 410, 474, 341, 474);
 
 ctx.drawImage(sen1, 40, 950, 669, 109);
 ctx.drawImage(btn1, 150, 350, 449, 288);
 var newImg = new Image();
 newImg.src = canvas.toDataURL("image/png");
 
 $('.photo').append(newImg);
 
 });

最后的結(jié)果生成的圖片就是這樣子的

以上是“js中canvas怎么實(shí)現(xiàn)5張圖片合成一張圖片”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！