easyUtil_dynamicBg

canvas实现动态背景图方法，两种模式，可全屏切换多图，也可在单一图片按位置切换，更新1.2版

简介

  原生js加canvas脚本功能实现动态背景图功能可选两种动画模式:setTimeout传统模式和requestAnimation的H5新增动画模式

  支持多帧图切换播放及单图片按位置切换方式

  支持模块化引用

  测试兼容主流（只要支持canvas的）浏览器，并利用图片缓存，尽可能减少图片的反复加载，降低开销

  使用提示：此插件虽已进行优化，尽可能的消除不必要的开销，但毕竟为js脚本执行，且依赖图片加载，因此不建议实现过多过长的动画背景，最佳为5s内循环的全屏动画背景或小图片的循环；如果需要更优质更长时间的效果，建议使用其他方式

插件API:

入口

• 普通调用全局引用名称为easy_DynamicBg，模块化可自定义名称

具体方法及参数（以普通调用名称为例）

• v1.1版以如下方法初始化即可：
    easy_DynamicBg.create(
      id：第一参数，｛String} canvas标签的id，必填
      src：第二参数，{Array} 图片的src连接名称，必填，单图片情况可以是字符串也可以是数组，多图片必须数组；
      第三参数（根据需求选填）：{
       multiple:false，单图片或多图片模式，默认false单图片；
       once:true，多图片模式下，动画播放次数，默认true，单次播放，设为false则循环播放；
       timer:false，是否开始计时器模式(true)，默认requestAnimation模式；
       bgSwitch:false，是否有多组动态背景（多个canvas）切换，默认false，多图片模式单次播放时此参数无效；如果设为true，将打开自动暂停和播放功能，如当前canvas处于隐藏状态，则停止播放动画，否则开启动画
       speed:100，计时器模式下的播放速度，默认100ms，最快设置50ms,为了保证正常的动画效果，建议保持100ms,timer为false时该参数无效；
       width:0，需显示图片的宽，多图片模式可不填写，默认为canvas的全屏宽高；
       height:0，需显示图片的高，多图片模式可不填写，默认为canvas的全屏宽高；
       offsetX:0，单图片模式下，图片在canvas画布上显示的偏移坐标x, 多图片模式下无效，不用填写；
       offsetY:0，单图片模式下，图片在canvas画布上显示的偏移坐标y, 多图片模式下无效，不用填写；
       x:0，单图片模式下，每行x的图片数量，如果相同，则可以只写x的值，多图模式下无效，不用填写；
       y:0，单图片模式下，每列y的图片数量，如果相同，则可以只写x的值，多图模式下无效，不用填写。
       callback:function(){}，多图片模式，单次播放时，可设置此回调函数，其他模式下无效。
      }
    )
  

具体应用举例

• 单图片模式：举例图片中每一个图片为50*65像素，每行每列均为4幅图，在canvas坐标200,100的位置显示，利用默认的requestAnimation方式
    easy_DynamicBg.create("bgCanvas1", "20180606214031336.png", {
      width : 50,
      height : 65,
      offsetX : 200,
      offsetY : 100,
      x : 4,
    });
  
• 多图片模式：循环创建src数组，利用setTimeout显示,保持100ms刷新
    let src = (function(){
      let src = [];
      for(let i =0; i < 33; i++){
        src.push("pic"+i+".jpg");
      }
      return src;
    }());
    easy_DynamicBg.create("bgCanvas2", src, {
      multiple : true,
      timer:true
    });