分享一個本身寫的基於canvas的原生js圖片爆炸插件

DEMO訪問地址： https://bupt-hjm.github.io/BoomGo/
博客地址： http://bupt-hjm.github.io/2016/07/10/boom/
插件及使用方法地址： https://github.com/BUPT-HJM/BoomGo
動畫：

1.參考JQuery，支持鏈式調用

(function(window, undefined) {
  //...
  // A.prototype.init.prototype指向A.prototype
  boom.prototype.init.prototype = boom.prototype;
  //暴露變量
  window.boom = boom;
})(window)

2.Canvas API getImageData 對圖像顏色採樣

/**
   * 獲取canvas像素值,構造colors數組
   * @param   ctx    繪圖上下文
   * @param   canvas canvas元素
   * @return  colors colors數組
   */
  function initColors(ctx, canvas) {
    var colors = [];
    var imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var data = imagedata.data;
    for (var x = 0; x < canvas.width; x++) {
      for (var y = 0; y < canvas.height; y++) {
        //獲取進入數組的偏移量
        var i = ((y * canvas.width) + x) * 4;

        var r = data[i];
        var g = data[i + 1];
        var b = data[i + 2];
        var a = data[i + 3];
        var color = {
          r: r,
          g: g,
          b: b,
          a: a
        }
        colors.push(color);
      }
    }
    return colors;
  }

3.支持自定義爆炸參數

//默認參數
var argOptions = {
    'radius': 10,//小球大小
    'minVx': -30,//最小水平噴射速度
    'maxVx': 30,//最大水平噴射速度
    'minVy': -50,//最小垂直噴射速度
    'maxVy': 50,//最大垂直噴射速度
    'edgeOpacity': false//canvas是否邊緣羽化
}
//爆炸go支持延時默認爲當即爆炸即go(0)

//使用自定義參數，能夠不寫全
var argOptions = {
    'radius': 10,//小球大小
    'minVx': -30,//最小水平噴射速度
    'maxVx': 30,//最大水平噴射速度
    'minVy': -50,//最小垂直噴射速度
    'maxVy': 50,//最大垂直噴射速度
    'edgeOpacity': false//是否canvas邊緣羽化
}
boom("canvas1","imgs/test1.jpg",argOptions).go(3000);
//3s後按argOptions參數爆炸id爲canvas1的圖片

更多東西由你發現

初學canvas，歡迎follow和star，pull request，提出您的寶貴意見
github地址： https://github.com/BUPT-HJM/BoomGo

感謝

• 感謝@chokcoco與@xxycode帶來的靈感和部分代碼參考

• 感謝@kiki9611的建議

• 參考

  • https://github.com/chokcoco/boomJS

  • https://github.com/xxycode/UIViewXXYBoom

---

可自由轉載、引用，但需署名做者且註明文章出處。