看了 @Liuyubobo 老师的 深度实战玩转算法 课程，感觉对自己解决问题的思路提供了很多帮助。本着毫不为己专门为人的精神[自己都脸红]，在不破坏算法本身和最大限度保持和课程代码一致的前提下，使用canvas重写了这些课程中的代码。希望能给大家提供一些思路，写的可能不太好，希望大家多包涵，如果有好的思路和建议也可以在下面留言告诉我。

说明

本来的渲染应该是一边执行算法一边渲染的，但是js中没有sleep这种线程休眠的方法。尝试了一些类似的手段，结果发现会导致浏览器卡住。为了不破坏算法本身的意义，就采用了一种比较作弊的手段。先计算出所有的数据，保存在一个数组里，然后再使用setInterval来进行渲染。

如果大家有更好的实现方式，可以在下面留言告诉我。

index.html

        当前浏览器不支持Canvas，请更换浏览器后再试
    

AlgoVisHelper.js

class AlgoVisHelper{
    // 构造函数
    constructor() {}

    static fillRectangle(g2d, x, y, w, h){
        g2d.fillRect(x, y, w, h);
    }

    static setColor(g2d, color){
        g2d.fillStyle = color;
    }
}

// 类中的静态属性
AlgoVisHelper.Red = "#F44336";
AlgoVisHelper.Pink = "#E91E63";
AlgoVisHelper.Purple = "#9C27B0";
AlgoVisHelper.DeepPurple = "#673AB7";
AlgoVisHelper.Indigo = "#3F51B5";
AlgoVisHelper.Blue = "#2196F3";
AlgoVisHelper.LightBlue = "#03A9F4";
AlgoVisHelper.Cyan = "#00BCD4";
AlgoVisHelper.Teal = "#009688";
AlgoVisHelper.Green = "#4CAF50";
AlgoVisHelper.LightGreen = "#8BC34A";
AlgoVisHelper.Lime = "#CDDC39";
AlgoVisHelper.Yellow = "#FFEB3B";
AlgoVisHelper.Amber = "#FFC107";
AlgoVisHelper.Orange = "#FF9800";
AlgoVisHelper.DeepOrange = "#FF5722";
AlgoVisHelper.Brown = "#795548";
AlgoVisHelper.Grey = "#9E9E9E";
AlgoVisHelper.BlueGrey = "#607D8B";
AlgoVisHelper.Black = "#000000";
AlgoVisHelper.White = "#FFFFFF";

AlgoFrame.js

class AlgoFrame{

    constructor(g2d, title, canvasWidth, canvasHeight) {
        this.g2d = g2d;
        this.canvasWidth = canvasWidth;
        this.canvasHeight = canvasHeight;
    }

    getCanvasWidth() {
        return this.canvasWidth;
    }

    getCanvasHeight() {
        return this.canvasHeight;
    }

    repaint(){
        // 具体绘制
        this.g2d.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

        var w = this.canvasWidth / this.data.N();

        for (var i = 0; i 

SelectionSortData.js

class SelectionSortData{

    constructor(N, randomBound){

        this.numbers = new Array(N);
        this.orderedIndex = -1;         // [0...orderedIndex) 是有序的
        this.currentCompareIndex = -1;  // 当前正在比较的元素索引
        this.currentMinIndex = -1;      // 当前找到的最小元素的索引

        for( var i = 0 ; i = this.numbers.length){
            throw ReferenceError("Invalid index to access Sort Data.");
        }

        return this.numbers[index];
    }

    swap(i, j) {

        if( i = this.numbers.length || j = this.numbers.length){
            throw ReferenceError("Invalid index to access Sort Data.");
        }

        var t = this.numbers[i];
        this.numbers[i] = this.numbers[j];
        this.numbers[j] = t;
    }

}

AlgoVisualizer.js

class AlgoVisualizer {
    constructor(g2d, sceneWidth, sceneHeight, N) {

        // 动画的执行速度[毫秒]
        this.DELAY = 5;

        this.g2d = g2d;

        // 初始化数据
        this.data = new SelectionSortData(N, sceneHeight);

        // 动画整个存储
        this.data_list = new Array();

        // 初始化视图
        this.frame = new AlgoFrame(g2d, "Selection Sort Visualization", sceneWidth, sceneHeight);
        this.run();
    }

    // 生成数据逻辑
    run() {
        this.setData(0, -1, -1);

        for (var i = 0; i  {
            if(i