如何使用HTML、Javascript或CamanJS将图像分割成碎片并重新排列？

我想从原始图像中创建拼图图像，这意味着一个图像被切割成9块（3x3），然后洗牌并存储为新图像。有人知道哪种方法最好，以及如何实现吗？也许是和卡曼斯？有人有示例代码吗？

Canvas可以使用

context.drawImage

的剪辑版本来完成此操作

context.drawImage

允许您从原始图像中剪裁9个子片段，然后在画布上的任意位置绘制它们

drawImage的剪裁版本采用以下参数：

• 要剪裁的图像：

  img

• 开始剪辑的原始图像中的[clipLeft，clipTop]

• 要从原始图像剪裁的子图像的大小

• 画布上的[drawLeft，drawTop]将开始绘制剪裁的子图像

• [drawWidth，drawHeight]是要在画布上绘制的子图像的缩放大小
  • 如果

    drawWidth==clipWidth

    和

    drawHeight==clipHeight

    ，则子图像将以从原始图像剪裁的相同大小绘制

  • 如果

    drawWidth==clipWidth和drawHeight==clipHeight

    ，子图像将缩放然后绘制

下面是一个示例代码和一个演示，它随机地将剪裁的片段绘制到画布上。它洗牌数组以定义碎片的随机位置，然后使用

drawImage

绘制这些碎片

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var行=3；
var-cols=3；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/sailboat.png";
函数start（）{
var iw=canvas.width=img.width；
var ih=画布高度=img高度；
var pieceWidth=iw/cols；
var pieceHeight=ih/行；
变量块=[
{col:0，row:0}，
{col:1，行：0}，
{col:2，row:0}，
{col:0，row:1}，
{col:1，row:1}，
{col:2，row:1}，
{col:0，row:2}，
{col:1，row:2}，
{col:2，row:2}，
]
洗牌；
var i=0；
对于（var y=0；这是一个病态的回答。从来没有得到过像这样详细的回答。如果可能的话，我现在就把我所有的观点都告诉你。非常感谢！！！！快速提问，是否可以将画布分成几块，而不是img？谢谢。