关于canvas插入gif动图的替代方案

前言：目前canvas是不支持插入gif动图的，但是有些业务要求开发人员可以将gif动图插入到canvas中并进行一系列的操作（移动，缩放，旋转），本人也在网上找了一圈，也没有什么有效的方式，基本都是拆解gif并且进行遍历切换来实现，我担心这样会大量的占用本地内存，导致卡顿，所以为了实现这个功能，我选择了一个折中方案：使用div+img标签的方式代替gif层的画板

一、结构解析
这里解析的是我自己写的画板插入图片的逻辑和结构，以便其他开发者可以参考和理解
我自己使用的canvas在插入图片时，会重新创建一个canvas，让这个canvas和之前的canvas重叠（相对定位即可），且这个新的canvas的层级（z-index）在其他canvas之上，这样对我插入的图片可以单独控制，不影响到其他画板上的内容，如果图片遮挡了必须要显示的内容，则只需要把图片层的canvas的层级调整到必要显示内容的层级之下

二、gif动图插入
因为canvas插入gif动图后会变成静态图，所以这里直接在插入gif动图时，会创建一个div，将div的尺寸设置成和普通的canvas相同，并且也重叠在canvas之上，这样我们可以在div中插入一个img标签，img标签中放入gif图片即可
img可以选择提前加载好，放在公共变量中可以随时取用：

var imageObj = new Image();
imageObj.onload = function () {
	console.log("该图片加载成功");
}
imageObj.onerror = function () {
    console.log("该图片加载失败");
}
imageObj.src = url;//url是图片链接

大概结构是这样的：

<div>
    <canvas style="z-index: 1; position: absolute; width: 1080px; height: 540px"></canvas>
    <!-- 这里是通过js插入的动图 -->
    <div style="z-index: 2; position: absolute; width: 1080px; height: 540px">
        <img style="position: absolute;" src="xxx.gif" />
    </div>
</div>

这样在视觉上跟canvas是一样的，只是换了一个比较简单的实现方式
至于动图大小、缩放、旋转的控制，直接在img上进行样式修改就行了

最后：我就不给完整代码了，开发者总得自己动手写点东西，有了思路，距离实现功能已经不远了！！！