DEMO access address:
bupt-hjm.github.io/BoomGo/
Plug-in and usage Address:
Github.com/BUPT-HJM/Bo…
Animation:

1. Support chain invocation by referring to JQuery

(function(window, undefined) {
  boom.prototype.init.prototype = boom.prototype;
  window.boom = boom;
  })(window)
Copy the code

2.Canvas API getImageDataImage color sampling

Get the canvas pixel value and construct the colors array * @param CTX drawing context * @param Canvas canvas element * @return colors Colors array */ 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; }Copy the code

3. Supports user-defined explosion parameters


var argOptions = {
    'radius': 10,
    'minVx': -30,
    'maxVx': 30,
    'minVy': -50,
    'maxVy': 50,
    'edgeOpacity': false
    }
Copy the code

var argOptions = {
    'radius': 10,
    'minVx': -30,
    'maxVx': 30,
    'minVy': -50,
    'maxVy': 50,
    'edgeOpacity': false
    }
boom("canvas1","imgs/test1.jpg",argOptions).go(3000);
Copy the code

More for you to discover

Follow and star, pull Request, and put forward your valuable opinions. Github address: github.com/BUPT-HJM/Bo…

Thank you

It can be reproduced and quoted freely, but the author must be signed and indicate the source of the article.