粉碎一个元素，向随机方向发送碎片答案

【问题标题】：Shatter an element, sending pieces in random directions粉碎一个元素，向随机方向发送碎片
【发布时间】：2014-01-22 18:07:18
【问题描述】：

我正在尝试“粉碎”一个元素（例如，图像），并将其碎片发送到随机方向。当碎片到达目的地（即 x 像素距离）时，它们将成为原始图像的较小版本。 jQuery UI 的explode 效果是不够的，因为它不会随机化方向，而是将各个部分平均分割（即必须可以整除成一个完美的正方形）。

我找到了this JSFiddle，并且我了解它是如何工作的——它将“单击此处”的每个字母包装在<span> 标签中，然后在缩放字体大小和淡出它们的同时以动画方式将它们发送到不同的方向——但是我不知道如何将这样的内容调整到无法以这种方式分割内容的单个元素/图像。

  $o.html($o.text().replace(/([\S])/g, "<span>$1</span>"));
  $o.css("position", "relative");
  $("span", $o).each(function(i) {
    var newTop = Math.floor(Math.random()*500)*((i%2)?1:-1);
    var newLeft = Math.floor(Math.random()*500)*((i%2)?1:-1);

    $(this).css({position: "relative",
      opacity: 1,
      fontSize: 12,
      top: 0,
      left: 0
    }).animate({
      opacity: 0,
      fontSize: 84,
      top: newTop,
      left:newLeft
    },1000);
  });

关于如何完成我所指的事情的任何想法？不一定要寻找解决方案；只是帮助我的一只手。

【问题讨论】：

请参阅stackoverflow.com/questions/13894066/… 以获取灵感。
不是我想要的，但还是谢谢你。

标签： javascript jquery html css jquery-ui

【解决方案1】：

我一直在研究一个小的 JavaScript 库，拆分图像：Shatter.js

这会让你走到一半。您只需要添加自己的物理/重力，就可以使生成的图像向各个方向爆炸。

项目页面底部列出了一些示例，这些示例显示了图像破碎的效果。

【讨论】：

【解决方案2】：

您将不得不将元素渲染到画布上，然后您可以“切割”并爆炸。您可以在此处阅读有关渲染到画布的信息：

Rendering HTML elements to <canvas>

【讨论】：

html2canvas 没有正确复制元素，即使我允许文档污染。看起来好像我正在寻找的东西目前是不可能的。或者，如果是这样的话，我需要重新考虑我的方法。无论如何，我很感激这个答案。