国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

分享一個自己寫的基于canvas的原生js圖片爆炸插件

Hegel_Gu / 811人閱讀

摘要：訪問地址博客地址插件及使用方法地址動畫參考，支持鏈?zhǔn)秸{(diào)用指向暴露變量對圖像顏色采樣獲取像素值構(gòu)造數(shù)組繪圖上下文元素數(shù)組獲取進入數(shù)組的偏移量支持自定義爆炸參數(shù)默認(rèn)參數(shù)小球大小最小水平噴射速度最大水平噴射速度最小垂直噴射速度最大垂直噴

DEMO訪問地址： https://bupt-hjm.github.io/BoomGo/
博客地址： http://bupt-hjm.github.io/2016/07/10/boom/
插件及使用方法地址： https://github.com/BUPT-HJM/BoomGo
動畫：

1.參考JQuery，支持鏈?zhǔn)秸{(diào)用 
(function(window, undefined) {
  //...
  // A.prototype.init.prototype指向A.prototype
  boom.prototype.init.prototype = boom.prototype;
  //暴露變量
  window.boom = boom;
})(window)
2.Canvas API getImageData 對圖像顏色采樣 
  /**
   * 獲取canvas像素值,構(gòu)造colors數(shù)組
   * @param   ctx    繪圖上下文
   * @param   canvas canvas元素
   * @return  colors colors數(shù)組
   */
  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++) {
        //獲取進入數(shù)組的偏移量
        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.支持自定義爆炸參數(shù) 
//默認(rèn)參數(shù)
var argOptions = {
    "radius": 10,//小球大小
    "minVx": -30,//最小水平噴射速度
    "maxVx": 30,//最大水平噴射速度
    "minVy": -50,//最小垂直噴射速度
    "maxVy": 50,//最大垂直噴射速度
    "edgeOpacity": false//canvas是否邊緣羽化
}
//爆炸go支持延時默認(rèn)為立即爆炸即go(0)
//使用自定義參數(shù)，可以不寫全
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參數(shù)爆炸id為canvas1的圖片
更多東西由你發(fā)現(xiàn) 
初學(xué)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

可自由轉(zhuǎn)載、引用，但需署名作者且注明文章出處。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/79953.html

相關(guān)文章

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

    摘要：也是一款優(yōu)秀的響應(yīng)式框架站點所使用的一套框架為微信服務(wù)量身設(shè)計的一套框架一組很小的，響應(yīng)式的組件，你可以在網(wǎng)頁的項目上到處使用一個可定制的文件，使瀏覽器呈現(xiàn)的所有元素，更一致和符合現(xiàn)代標(biāo)準(zhǔn)。 GitHub 值得收藏的前端項目 整理與收集的一些比較優(yōu)秀github項目，方便自己閱讀，順便分享出來，大家一起學(xué)習(xí)，本篇文章會持續(xù)更新，版權(quán)歸原作者所有。歡迎github star與fork 預(yù)...

    maxmin 評論0 收藏0

  • 原生JS實現(xiàn)DOM粒子爆炸效果

    摘要：爆炸動效分享前言此次分享是一次自我組件開發(fā)的總結(jié)，還是有很多不足之處，望各位大大多提寶貴意見，互相學(xué)習(xí)交流。粒子實現(xiàn)實現(xiàn)思路希望在粒子管控組件時，使用的方式創(chuàng)建粒子，每個粒子存在自己的動畫開始方法，動畫結(jié)束回調(diào)。 爆炸動效分享 前言 此次分享是一次自我組件開發(fā)的總結(jié)，還是有很多不足之處，望各位大大多提寶貴意見，互相學(xué)習(xí)交流。 分享內(nèi)容介紹 通過原生js代碼，實現(xiàn)粒子爆炸效果組件組件開發(fā)...

    KunMinX 評論0 收藏0

  • 原生JS實現(xiàn)DOM粒子爆炸效果

    摘要：爆炸動效分享前言此次分享是一次自我組件開發(fā)的總結(jié)，還是有很多不足之處，望各位大大多提寶貴意見，互相學(xué)習(xí)交流。粒子實現(xiàn)實現(xiàn)思路希望在粒子管控組件時，使用的方式創(chuàng)建粒子，每個粒子存在自己的動畫開始方法，動畫結(jié)束回調(diào)。 爆炸動效分享 前言 此次分享是一次自我組件開發(fā)的總結(jié)，還是有很多不足之處，望各位大大多提寶貴意見，互相學(xué)習(xí)交流。 分享內(nèi)容介紹 通過原生js代碼，實現(xiàn)粒子爆炸效果組件組件開發(fā)...

    chanthuang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<