使用 vue2和 canvas 编写一个可视化排序.

最近再练习排序的时候,突然想到,如果编写一个可视化排序,然后再写排序算法,那就有趣多了.

说做就做,当然我们先制定一个小目标.

1. 可视化排序.
2. 即时可以编辑代码,即时运行.
3. 对编写的代码没有侵入性,编写的代码只关心排序,而不关心可视化.
4. 可以随时调节动画速度.

使用技术栈. vue2 + compass + elementUI

原理. 新建一个随机数组,使用 Object.definePropert对随机数组的 get,set 进行包装. 每次数组改变,保存一个数组快照,对最近 两个get 数组中的元素进行标红. 最后使用 canvas 绘制.

效果

觉得不错,可以在 github 上,给个 start. github 线上demo 地址