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'