让图片爆炸起来！

DEMO访问地址：bupt-hjm.github.io/BoomGo/ 插件及使用方法地址： github.com/BUPT-HJM/Bo… 动画：

1.参考JQuery，支持链式调用

(function(window, undefined) {
  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
    }

var argOptions = {
    'radius': 10,
    'minVx': -30,
    'maxVx': 30,
    'minVy': -50,
    'maxVy': 50,
    'edgeOpacity': false
    }
boom("canvas1","imgs/test1.jpg",argOptions).go(3000);

更多东西由你发现

初学canvas，欢迎follow和star，pull request，提出您的宝贵意见 github地址： github.com/BUPT-HJM/Bo…

感谢

可自由转载、引用，但需署名作者且注明文章出处。