分享一个自己写的基于canvas的原生js图片爆炸插件

Hegel_Gu 发布于2019-08-19 18:45 / 726人阅读

摘要：访问地址博客地址插件及使用方法地址动画参考，支持链式调用指向暴露变量对图像颜色采样获取像素值构造数组绘图上下文元素数组获取进入数组的偏移量支持自定义爆炸参数默认参数小球大小最小水平喷射速度最大水平喷射速度最小垂直喷射速度最大垂直喷

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的建议

参考

https://github.com/chokcoco/boomJS

https://github.com/xxycode/UIViewXXYBoom

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

海外云主机云服务器 js图片爆炸原生js弹窗插件 js 社会化分享插件手机图片切换js原生

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79953.html

GitHub 值得收藏的前端项目[每月更新...]

摘要：也是一款优秀的响应式框架站点所使用的一套框架为微信服务量身设计的一套框架一组很小的，响应式的组件，你可以在网页的项目上到处使用一个可定制的文件，使浏览器呈现的所有元素，更一致和符合现代标准。 GitHub 值得收藏的前端项目整理与收集的一些比较优秀github项目，方便自己阅读，顺便分享出来，大家一起学习，本篇文章会持续更新，版权归原作者所有。欢迎github star与fork 预...

maxmin 2019-08-29 16:07 评论0 收藏0
原生JS实现DOM粒子爆炸效果

摘要：爆炸动效分享前言此次分享是一次自我组件开发的总结，还是有很多不足之处，望各位大大多提宝贵意见，互相学习交流。粒子实现实现思路希望在粒子管控组件时，使用的方式创建粒子，每个粒子存在自己的动画开始方法，动画结束回调。爆炸动效分享前言此次分享是一次自我组件开发的总结，还是有很多不足之处，望各位大大多提宝贵意见，互相学习交流。分享内容介绍通过原生js代码，实现粒子爆炸效果组件组件开发...

KunMinX 2019-08-29 17:04 评论0 收藏0
原生JS实现DOM粒子爆炸效果

摘要：爆炸动效分享前言此次分享是一次自我组件开发的总结，还是有很多不足之处，望各位大大多提宝贵意见，互相学习交流。粒子实现实现思路希望在粒子管控组件时，使用的方式创建粒子，每个粒子存在自己的动画开始方法，动画结束回调。爆炸动效分享前言此次分享是一次自我组件开发的总结，还是有很多不足之处，望各位大大多提宝贵意见，互相学习交流。分享内容介绍通过原生js代码，实现粒子爆炸效果组件组件开发...

chanthuang 2019-08-02 11:50 评论0 收藏0