H5 canvas 实现排序算法过程动画

H5 canvas 实现排序算法过程动画

实现思路

通过柱状图方式，绘制数组数据，每一次交换数组数据时重绘

（用的录屏软件，貌似录得有点重影）

1、定义一个canvas

body{
    margin: 0;
    padding: 0;
    background: #F6F6F6;
}

.div1 {
    margin: 50px auto;
    width: 500px;
}

#cvs {
    background: #FFF;
    box-shadow: 0px 0px 1px 1px #555555;
    margin: 10px;
}

<div class="div1">
    <canvas id="cvs" width="500" height="500"></canvas>
    <button onclick="start()">开始</button>
</div>

2、具体实现代码

    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');
    var lists = [