canva怎么组合_教你使用Canvas合成图片

之前写过一篇有关Canvas图片处理的文章，主要说的是用HTML5中的Canvas实现类似PS中的滤镜功能，而今天我们继续说说这强大的Canvas，看看如何用它来实现PS中的图片合成功能。

一、使用场景

图片合成的使用场景是非常广的，虽说强大的PS能将任意图片组合在一起，但它也只能实现固定的几张图片的合成，而Canvas则能动态地将各种不同的图片合为一张图片。

那么，何为动态合成呢？

比如，我们要将用户的头像合到另一张图片上，这时候因为用户是不确定的，不同用户的头像不同，所以我们肯定不能用PS来做这件事，这时候就是Canvas大显身手的时候了。

二、基本原理

HTML5给我们提供了一个很好的图像处理神器Canvas，想要合成图片，我们首先得将图片按照一定顺序、大小和位置一张张绘制到Canvas画布中去，最后再将整个Canvas导出为图片。

Canvas图片合成

三、编码实践

1、创建Canvas画布

let canvas = document.createElement('canvas'),

ctx = canvas.getContext('2d');

canvas.width = 800;

canvas.height = 800;

2、绘制图片至Canvas

let img1 =