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的建议
-
参考
可自由转载、引用,但需署名作者且注明文章出处。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。