随机还原拼图(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