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

感谢


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

分享一个自己写的基于canvas的原生js图片爆炸插件的更多相关文章

  1. 分享一个以前写的基于C#语言操作数据库的小框架

    一:前言 这个是以前写的操作MySQL数据库的小型框架,如果是中小型项目用起来也是很不错的,里面提供Filter.ModelPart.Relationship等机制实现操作数据库时的SQL语句的拼接和 ...

  2. 分享一个自己写的基于TP的关系模型

    为了说明问题,假设现在有表test1,test1有从表test2:test1属于test3,test1和test4多对多,关联表test1_test4. 1.定义关系 class Test1Model ...

  3. 分享一个自己写的基于JQuery的一个Web背景切换的Demo

    这个效果主要有两个特点: 1. 背景切换的渐变 2. 背景大小自适应 3. 背景自适应保持比例同时, 相对居中 js源码: (function ($) { $.fn.bgChange = functi ...

  4. 分享一个自己写的基于TP的关系模型(四)

    修复分页BUG,原有代码查询到最后一页就一只查询最后一页 $ ? $; $this->maxPage = ceil($this->total/$this->rows); //$thi ...

  5. 分享一个自己写的基于TP的关系模型(三)

    这段时间对模型做了升级和优化,并将版本更新到TP3.2. 下载 下载后请将目录放置TP的Library目录下 1.数据节点优化,原来的节点为模型的名称或者表名,现在更新为定义关系的方法名 public ...

  6. 分享一个自己写的基于TP的关系模型(2)

    1.增加多对多关系的处理 /** * 定义关系 * @return array */ public function test4(){ //参数说明 //关联的模型 //主表关联字段 //关联中间表 ...

  7. 基于canvas与原生JS的H5动画引擎

    前一段时间项目组里有一些H5动画的需求,由于没有专业的前端人员,便交由我这个做后台的研究相关的H5动画技术. 通过初步调研,H5动画的实现大概有以下几种方式: 1.基于css实现 这种方式比较简单易学 ...

  8. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  9. 分享一个c#写的开源分布式消息队列equeue

    分享一个c#写的开源分布式消息队列equeue 前言 equeue消息队列中的专业术语 Topic Queue Producer Consumer Consumer Group Broker 集群消费 ...

随机推荐

  1. Chrome:开发者模式下复制Element下的代码

    Element模块下的代码只能一行一行复制,想要复制一个代码块,可以把该代码块先收起来,再对这个收起来的代码块进行复制就OK了

  2. 资源管理模式:Evictor模式

    Evictor模式描述了何时以及如何释放资源以优化资源管理.这个模式让我们可以配置不同的策略来自动决定哪些资源应该释放,以及应该在什么时候释放. 实例 考虑一个网络管理系统--管理多个网络元素.这些网 ...

  3. row_number()over分组排序

    row_number()over(partition by Id,Code order by setTime desc)

  4. Scala语法2

    练习 package scala_01.practice import org.junit.{Before, Test} import scala.collection.immutable impor ...

  5. 微信小程序搜索并高亮关键字

    更多解读可使用博客: https://www.jianshu.com/p/86d73745e01c 实现流程:1.在文本框中输入关键字key,如"比赛",检索出比赛相关的列表key ...

  6. tensorflow源码解析之framework-shape_inference

    目录 什么是形状推断 InferenceContext 关系图 涉及的文件 迭代记录 1. 什么是形状推断 前面我们讲到op的时候,提到了操作的注册器OpRegistry,并且提到,其中注册的数据是一 ...

  7. LGP3703题解

    不会数据结构石锤了/kk 题意清晰. 我们看到 \(1\) 操作比较奇怪,考虑从 \(1\) 操作入手. 设 \(f_u\) 为 \(u\) 到根节点一共有多少种颜色,我们使用树剖来维护这个东西. 考 ...

  8. LGP6011题解

    昨天考试考到了这道题,那就来补一下题解吧. 题意简单不再阐述. 首先删除之后还要向左移动,很容易想到 ODT 平衡树,这个过于一眼,不再阐述. 重点说第二种方法. 向左平移的这个操作,我们是否可以用别 ...

  9. 基于Drone+Gogs流水线-全面认识轻量级云原生CI引擎Drone

    1. 介绍 Drone by Harness 是一个基于Docker容器技术的可扩展的持续集成引擎,用于自动化测试.构建.发布.每个构建都在一个临时的Docker容器中执行,使开发人员能够完全控制其构 ...

  10. redis规范(实用)

    redis功能强大,数据类型丰富,再快的系统,也经不住疯狂的滥用.通过禁用部分高风险功能,并挂上开发的枷锁,业务更能够以简洁.通用的思想去考虑问题,而不是绑定在某种实现上. Redis 根据不同的用途 ...