Question

我有一小段代码在页面中绘制一条线。我的问题是我对HTML5或JS不太了解，我需要帮助来设置这条线的绘制延迟。我希望能够选择是否要在打开页面时立即看到它，或者在绘制之前将其定义为延迟5秒。

这是：

<canvas id="myCanvas" width="1250" height="120"></canvas>

<script>

var canvas = $("#myCanvas")[0];
var c = canvas.getContext("2d");
var amount = 0;
var startX = 164;
var startY = 120;
var endX = 1094;
var endY = 120;

setInterval(function() {
    amount += 0.01; // change to alter duration
    if (amount > 1) amount = 1;
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.strokeStyle = "black";
    c.lineWidth=1;
    c.strokeStyle="#707070";
    c.moveTo(startX, startY);
    // lerp : a  + (b - a) * f
    c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
    c.stroke();
}, 0);

</script>

感谢您的帮助！

Answer 1

将其包装在setTimeout中：

var canvas = $("#myCanvas")[0];
var c = canvas.getContext("2d");
var amount = 0;
var startX = 164;
var startY = 120;
var endX = 1094;
var endY = 120;

setTimeout(function() {
    var interval = setInterval(function() {
        amount += 0.01; // change to alter duration
        if (amount > 1) {
            amount = 1;
            clearInterval(interval);
        }
        c.clearRect(0, 0, canvas.width, canvas.height);
        c.strokeStyle = "black";
        c.lineWidth=1;
        c.strokeStyle="#707070";
        c.moveTo(startX, startY);
        // lerp : a  + (b - a) * f
        c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
        c.stroke();
    }, 0);

}, 3000);

在开始绘图之前，上述等待3秒（3000毫秒）。此外，无论何时使用setInterval启动间隔，都应存储返回值，以便稍后停止间隔。上面的代码在使用clearInterval（）完成绘图时停止间隔。

Answer 2

您需要使用setTimeout：

setTimeout(function() {
    setInterval(function() {
        amount += 0.01; // change to alter duration
        if (amount > 1) amount = 1;
        c.clearRect(0, 0, canvas.width, canvas.height);
        c.strokeStyle = "black";
        c.lineWidth=1;
        c.strokeStyle="#707070";
        c.moveTo(startX, startY);
        // lerp : a  + (b - a) * f
        c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
        c.stroke();
    }, 0);
}, 5000);

Answer 3

在setInterval来电中打包setTimeout来电。 setInterval重复调用其函数参数，其中第二个参数指定调用之间的延迟。 <{1}}在延迟过后，调用其函数参数一次。

setTimeout

Answer 4

您需要使用setTimeout。 setTimeout在一段延迟后运行一个调用。

脚本中使用的函数setInterval以一定的间隔反复运行相同的函数。 Strile's answer应该帮助你

Answer 5

简短回答

使用setTimeout函数延迟执行。 setTimeout做的是设置一个定时器，它将在指定的时间后执行指定的功能。 E.g。

setTimeout(function() {
    alert("Hello!");
}, 5000);

将在5秒后显示警告（请注意，时间以毫秒为单位）。

答案很长

有两个功能可以让您安排执行功能。

setTimeout(func, delay)将在给定的延迟后执行给定的函数。这个用于一次性执行功能。
setInterval(func, delay)将在延迟传递后重复执行给定的函数。初始延迟后，将执行指定的功能。然后定时器将被复位，一旦延迟再次通过，功能将再次执行，依此类推。

可以使用对方（clearTimeout和clearInterval）取消这两个功能。

HTML5 - 延迟画布绘图

5 个答案: