js画布实现5张图片合成一张图片

本文要达到的具体效果与下图类似。主题流可能是页面上有一个类似这种布局的结构。点击中间的紫色按钮会生成这样的图片，并允许用户下载图片

1.首先，我们布局页面的时候，是用图片这样布局的[CSS自己编大脑]。这个类是pho-bg，这是页面开始显示的结构，中间有几个图片和按钮。当类为photo时，用于放置生成的图片。画布就是画布。至于下面两张图，其实是按钮的图片和背景图，到时候会添加到画布上【但是不会显示在页面上】

div class=' pho-BG ' img src=' http : ossweb-img/man-1 . png ' class=' man man-1 ' id=' man-1 ' alt=' img src=' http : ossweb-img/man-2 . png ' class=' man man-2 ' id=' man-2 ' alt=' img src=' http : ossweb-img/man-3 . png ' class=' man man man-2 'class=' BTN ' title=' '/a img src=' http : OSS web-img/sen . png ' class=' sen 1 ' id=' sen 1 ' alt=' img id=' show-pic ' alt=' '/Div class=' photo '/Div canvas id=' my canvas ' width=' 750 ' height=' 1180 '/canvas img src=' http 3360 ossweb-img/bg1 . jpg ' id=' bg1 ' alt='

当您单击按钮时，隐藏原始页面并显示画布生成的图片画布。宽度和画布。高度设置生成图片的大小。比如我在canvas的html标签中设置了width=750，height=1180，但是在js中设置了canvas.width=500，canvas.height=500，那么生成的图片大小就是500*500。使用“创建图案”制作图片的背景图片。使用drawImage()制作组成图片的小元素，即红、黄、蓝、绿、紫。最后，使用toDataURL()将画布的内容转换为图片，并将其渲染到页面$('。BTN ')。单击(function () {$(')。pho //$('#myCanvas ')。show()；var man 1=document . getelementbyid(' man-1 ')，man 2=document . getelementbyid(' man-2 ')，man 3=document . getelementbyid(' man-3 ')，man 4=document . getelementbyid(' man-4 ')，sen1=document . getelementbyid(' sen1 ')，BTN 1=document . getelementbyid(' BTN 1 ')，canvasBg=document . getelementbyid(' bg1 ')；var canvas=document . getelementbyid(' my canvas ')；CTX=canvas . getcontext(' 2d ')；canvas.width=750canvas.height=1180//制作背景图片var patbg=CTX。创建图案(画布BG，‘重复’)；ctx.rect(0，0，750，1180)；ctx.fillStyle=patBgCTX . 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 new img=new Image()；newimg . src=canvas . todaytaul(' image/png ')；$('.照片')。追加(NewIMg)；});生成图片的最终结果是这样的

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。