資訊專(zhuān)欄INFORMATION COLUMN
摘要：訪(fǎng)問(wèn)地址博客地址插件及使用方法地址動(dòng)畫(huà)參考，支持鏈?zhǔn)秸{(diào)用指向暴露變量對(duì)圖像顏色采樣獲取像素值構(gòu)造數(shù)組繪圖上下文元素?cái)?shù)組獲取進(jìn)入數(shù)組的偏移量支持自定義爆炸參數(shù)默認(rèn)參數(shù)小球大小最小水平噴射速度最大水平噴射速度最小垂直噴射速度最大垂直噴
DEMO訪(fǎng)問(wèn)地址： https://bupt-hjm.github.io/BoomGo/
博客地址： http://bupt-hjm.github.io/2016/07/10/boom/
插件及使用方法地址： https://github.com/BUPT-HJM/BoomGo
動(dòng)畫(huà)：
(function(window, undefined) {
//...
// A.prototype.init.prototype指向A.prototype
boom.prototype.init.prototype = boom.prototype;
//暴露變量
window.boom = boom;
})(window)
2.Canvas API getImageData 對(duì)圖像顏色采樣
/**
* 獲取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++) {
//獲取進(jìn)入數(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支持延時(shí)默認(rèn)為立即爆炸即go(0)
//使用自定義參數(shù)，可以不寫(xiě)全
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，提出您的寶貴意見(jiàn)
github地址： https://github.com/BUPT-HJM/BoomGo
感謝@chokcoco與@xxycode帶來(lái)的靈感和部分代碼參考
感謝@kiki9611的建議
參考
https://github.com/chokcoco/boomJS
https://github.com/xxycode/UIViewXXYBoom
可自由轉(zhuǎn)載、引用，但需署名作者且注明文章出處。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79953.html
摘要：也是一款優(yōu)秀的響應(yīng)式框架站點(diǎn)所使用的一套框架為微信服務(wù)量身設(shè)計(jì)的一套框架一組很小的，響應(yīng)式的組件，你可以在網(wǎng)頁(yè)的項(xiàng)目上到處使用一個(gè)可定制的文件，使瀏覽器呈現(xiàn)的所有元素，更一致和符合現(xiàn)代標(biāo)準(zhǔn)。 GitHub 值得收藏的前端項(xiàng)目 整理與收集的一些比較優(yōu)秀github項(xiàng)目，方便自己閱讀，順便分享出來(lái)，大家一起學(xué)習(xí)，本篇文章會(huì)持續(xù)更新，版權(quán)歸原作者所有。歡迎github star與fork 預(yù)...
摘要：爆炸動(dòng)效分享前言此次分享是一次自我組件開(kāi)發(fā)的總結(jié)，還是有很多不足之處，望各位大大多提寶貴意見(jiàn)，互相學(xué)習(xí)交流。粒子實(shí)現(xiàn)實(shí)現(xiàn)思路希望在粒子管控組件時(shí)，使用的方式創(chuàng)建粒子，每個(gè)粒子存在自己的動(dòng)畫(huà)開(kāi)始方法，動(dòng)畫(huà)結(jié)束回調(diào)。 爆炸動(dòng)效分享 前言 此次分享是一次自我組件開(kāi)發(fā)的總結(jié)，還是有很多不足之處，望各位大大多提寶貴意見(jiàn)，互相學(xué)習(xí)交流。 分享內(nèi)容介紹 通過(guò)原生js代碼，實(shí)現(xiàn)粒子爆炸效果組件組件開(kāi)發(fā)...
摘要：爆炸動(dòng)效分享前言此次分享是一次自我組件開(kāi)發(fā)的總結(jié)，還是有很多不足之處，望各位大大多提寶貴意見(jiàn)，互相學(xué)習(xí)交流。粒子實(shí)現(xiàn)實(shí)現(xiàn)思路希望在粒子管控組件時(shí)，使用的方式創(chuàng)建粒子，每個(gè)粒子存在自己的動(dòng)畫(huà)開(kāi)始方法，動(dòng)畫(huà)結(jié)束回調(diào)。 爆炸動(dòng)效分享 前言 此次分享是一次自我組件開(kāi)發(fā)的總結(jié)，還是有很多不足之處，望各位大大多提寶貴意見(jiàn)，互相學(xué)習(xí)交流。 分享內(nèi)容介紹 通過(guò)原生js代碼，實(shí)現(xiàn)粒子爆炸效果組件組件開(kāi)發(fā)...
閱讀 2669·2023-04-25 15:22
閱讀 2839·2021-10-11 10:58
閱讀 1061·2021-08-30 09:48
閱讀 1866·2019-08-30 15:56
閱讀 1740·2019-08-30 15:53
閱讀 1107·2019-08-29 11:16
閱讀 1060·2019-08-23 18:34
閱讀 1652·2019-08-23 18:12
