javascript - 在 Canvas 中设置超时

Question

这是我的一个示例代码:

<canvas width="500" height="500"></canvas>
<script>
    var cx = document.querySelector("canvas").getContext("2d");
    cx.beginPath();


    for (var y = 0; y < 500; y+=10) {
        cx.moveTo(0,0);
        cx.lineTo(500,y);
    }

    cx.lineWidth = 3;
    cx.strokeStyle = 'blue';
    cx.stroke();

</script>

它从一个点开始创建 50 条线。我想对每一行使用 setTimeout 。所以我认为下面的代码应该可以完成工作，但它不起作用:

setTimeout(function() {
    for (var y = 0; y < 500; y+=10) {
        cx.moveTo(0,0);
        cx.lineTo(500,y);
        cx.stroke();
    }
}, 300);

有人可以告诉我问题是什么吗

Answer 1

试试这个:

演示 Fiddle

HTML:

<canvas width="500" height="500"></canvas>

JavaScript:

var start = 0;
var leftX = start;
var leftY = start;
var end = 500;
var cx = document.querySelector("canvas").getContext("2d");
cx.beginPath();
cx.lineWidth = 3;
cx.strokeStyle = 'blue';

for (y = start; y < end; y++) {
    window.setTimeout(function () {
        cx.moveTo(start, start);
        cx.lineTo(leftX, leftY);
        cx.stroke();
        leftX++;
        leftY++;
    }, 1 + (y * 20) / 3);
}