分享一个本身写的基于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 for (var y = 0; 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

可自在转载、援用，但需签名作者且说明文章出处。