javascript - 如何在“for循环”控制的绘图功能中控制html5画布中的帧速率

Question

我正在使用 HTML5 画布来直观地表示选择排序。我制作了单独的绘图功能并将其放在外部 for 循环中，旨在在每次交换数字后更新屏幕。在运行代码时，它只会一次性显示最终结果。

代码：-

const canvas = document.getElementById('my_canvas');
var height = 400;
var width = 400;

canvas.height = height;
canvas.width = width;

const c = canvas.getContext('2d');

var arr = [];

for(var i=0;i<width/3;i++){
    arr[i] = Math.floor(Math.random() * width);
}

var len = arr.length;
function show(){
    c.clearRect(0,0,width,height);
    
    for(var i=0;i<len;i++){
        c.beginPath();
        c.moveTo(3*i,height);
        c.lineTo(3*i,arr[i]);
        c.strokeStyle = '#ffffff';
        c.stroke();
    }
}


var temp;
var index;


for(var i = 0;i < len;i++){
    index = i;
    for(var j = i;j < len;j++){
        if(arr[j] >= arr[index]){
            index = j;
        }
    }
    temp = arr[index];
    arr[index] = arr[i];
    arr[i] = temp;
    show();
}

我尝试使用 for 循环来制作时间缓冲区，但这也失败了。我尝试使用 requestAnimationFrame 和一些代码补丁来控制帧率，但是排序可能会失败

那么，用 for-loop 控制的绘制/更新功能来控制 HTML5 画布中的帧率的方法是什么？

标签： javascriptcanvas