Skip to main content
 首页 » 学习笔记 » html5/css3

关于一个基于canvas的原生js图片爆炸插件

2016年07月28日1740

1.jpg

DEMO访问地址:https://bupt-hjm.github.io/BoomGo/
插件及使用方法地址: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 APIgetImageData对图像颜色采样

/**
* 获取canvas像素值,构造colors数组
*@paramctx    绘图上下文
*@paramcanvas canvas元素
*@returncolors colors数组
*/
functioninitColors(ctx, canvas){
varcolors = [];
varimagedata = ctx.getImageData(0,0, canvas.width, canvas.height);
vardata = imagedata.data;
for(varx =0; x < canvas.width; x++) {
for(vary =0; y < canvas.height; y++) {
//获取进入数组的偏移量
vari = ((y * canvas.width) + x) *4;
varr = data[i];
varg = data[i +1];
varb = data[i +2];
vara = data[i +3];
varcolor = {
r: r,
g: g,
b: b,
a: a
}
colors.push(color);
}
}
returncolors;
}

3、支持自定义爆炸参数

//默认参数
varargOptions = {
'radius':10,//小球大小
'minVx': -30,//最小水平喷射速度
'maxVx':30,//最大水平喷射速度
'minVy': -50,//最小垂直喷射速度
'maxVy':50,//最大垂直喷射速度
'edgeOpacity':false//canvas是否边缘羽化
}
//爆炸go支持延时默认为立即爆炸即go(0)
//使用自定义参数,可以不写全
varargOptions = {
'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的图片
微信