jscanvas实现5张图片合成一张图片

jscanvas实现5张图⽚合成⼀张图⽚
本⽂具体要实现的效果类似下⾯这张图⽚，主题流程⼤概是，页⾯上有类似这样布局的结构，点击中间那个紫⾊的按钮就会⽣成⼀张这样的图⽚，并且能够让⽤户下载图⽚的
1、⾸先我们布局页⾯的时候⽤的都是图⽚来布局成这个样⼦[CSS⾃⼰脑补]，class为pho-bg这⼀段是页⾯开始显⽰的结构，⼏张图⽚定位，按钮在中间的样⼦。

class为photo的就是⽤来到时候放置⽣成的图⽚。

canvas就是画布。

⾄于下⾯的两张图⽚其实就是按钮的图⽚和背景图，到时候⼀并加⼊画布⾥⾯【不过在页⾯的时候不显⽰】
<div class="pho-bg">
<img src="ossweb-img/man-1.png" class="man man-1" id="man-1" alt="">
<img src="ossweb-img/man-2.png" class="man man-2" id="man-2" alt="">
<img src="ossweb-img/man-3.png" class="man man-3" id="man-3" alt="">
<img src="ossweb-img/man-4.png" class="man man-4" id="man-4" alt="">
<a href="javascript:;" class="btn" title=""></a>
<img src="ossweb-img/sen.png" class="sen1" id="sen1" alt="">
<img id="show-pic" alt="">
</div>
<div class="photo"></div>
<canvas id="myCanvas" width="750" height="1180"></canvas>
<img src="ossweb-img/bg1.jpg" id="bg1" alt="">
<img src="ossweb-img/btn.png" id="btn1" alt="">
2、重要的是js部分，这⾥⾯有⼏个部分
在点击按钮时隐藏掉本来的页⾯，显⽰画布⽣成的图⽚
canvas.width，canvas.height是设置你⽣成的图⽚的⼤⼩。

举个例⼦：如果我在canvas的html标签⾥⾯设置的
width=750，height=1180，但是在js⾥⾯设置了canvas.width=500，canvas.height=500，那么⽣成的图⽚的⼤⼩就会是500*500.
使⽤createPattern来制作图⽚的背景图
使⽤drawImage()来制作组成图⽚的⼩元素也就是红、黄、蓝、绿、紫那⼏张图⽚
最后⽤toDataURL()将画布的内容转为图⽚并且渲染到页⾯上
$('.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加⼊画布
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);
});
最后的结果⽣成的图⽚就是这样⼦的
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。