随机拼图还原（Canvas实现）

随机还原拼图（Canvas实现）

在线预览：https://goodluck333.github.io/AutomaticPuzzle/

将整张图片拆分n行m列个小图块，随机打乱顺序; 开始随机还原拼图，找到对应拼图块则不进行下一轮，直到完整还原; 停止随机还原拼图，定格当前位置，可继续开启或重新打乱;

我也不知道为啥要写这个，还是写了！

一开始在想用什么办法来解决 图片切块&&显示的问题？（如何切块显示？后面说，先看基础问题）

1、n * m 块div，设置背景图;

2、canvas;

第一种，需要很多小图拼接成一个完成的大图。需计算每小块图背景图所在的位置，但n、m值过大会导致浏览器性能下降。

第二种，只需要一个canvas即可，需计算每小块图所要画的位置，n、m值大小并无影响。

选 canvas！

设计之初，得先考虑到图片原始大小和容器大小的问题！（计算canvas宽、高的方法）

图片原始大小大、小和容器大、小不可能一致，导至图片宽、高比和容器宽、高比不成比例。如果直接渲染的话会导致图片展示不全的BUG！

在初始化的时候需要拿到容器的width和height、图片原始的width和height;

试想一：容器特别宽，那你canvas是不是只能用容器的高做canvas的高，宽用比例去计算出来;

试想二：容器特别高，那你canvas是不是只能用容器的宽做canvas的宽，高用比例去计算出来;

试想三：容器和canvas是同一比例，但只是大小不同，canvas完全与容器宽、高相等;

canvas是以容器为基础的，永远不能超出容器;

已经算出了canvas的宽、高，设置canvas的宽、高！

该画 canvas 了！但是得想一下如何给canvas画上图片不同位置切好的小块图片？

drawImage(image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)

ctx.drawImage 给了很多参数，把这些参数都弄懂就OK！

image：图片对象;

imageX、imageY、imageWidth、imageHeight 能组合出在图片上的一个区域，这是要画到canvas的图片区域;

canvasX、canvasY、canvasWidth、canvasHeight 能组合出在canvas上的一个区域;

画canvas的核心已经解决了，然后循环画一整张的canvas就完成整面canvas;

按顺序循环可以画一整张的canvas图片，打乱顺序即可做出像拼图一样的效果;

可使用数组或对象的形式存储随机的图片切块坐标，本次使用的是对象形式，双重循环生成二维对象存储随机的图片切块坐标数组;

生成的对象就是一个完整的一张随机图片的数据，对对象进行遍历，使用canvas画图功能将小图块一块块的画到canvas上，这样就完成了乱序图片功能;

开始随机还原拼图，使用定时器生成新的乱序图片，如找到正确的图片位置将该位置状态置true，该位置为正确图片坐标，下次跳过参与生成新乱序图片;

停止随机还原拼图，只需清除定时器;

以上完成了其主要思路，谢谢提出好的建议！

By:GoodLuck333