Javascript HTML5-延迟画布绘制

我有一个简单的代码块来在页面中画一条线。我的问题是我不太了解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>

var canvas=$（“#myCanvas”）[0]；
var c=canvas.getContext（“2d”）；
风险价值金额=0；
var startX=164；
var-startY=120；
var endX=1094；
var-endY=120；
setInterval（函数（）{
金额+=0.01；//更改为更改持续时间
如果（金额>1）金额=1；
c、 clearRect（0，0，canvas.width，canvas.height）；
c、 strokeStyle=“黑色”；
c、 线宽=1；
c、 strokeStyle=“#707070”；
c、 移动到（startX、startY）；
//lerp:a+（b-a）*f
c、 行至（startX+（endX-startX）*金额，startY+（endY-startY）*金额）；
c、 笔划（）；
}, 0);

---

谢谢你的帮助

您需要使用

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);

---

将其包装在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（）绘制完成后，上面的代码会停止间隔。

将

setInterval

调用包装在

setTimeout

调用中

setInterval

重复调用其函数参数，其中第二个参数指定调用之间的延迟

setTimeout

在延迟过后调用其函数参数一次

function redraw() {
  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();
}


setTimeout(function () { setInterval(redraw, 0) }, 5000);

你需要使用。setTimeout在一定延迟后运行调用

---

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

简短的回答

使用函数延迟执行。所做的是设置一个计时器，在指定的时间后执行指定的功能。例如

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

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

---

长答案

有两个函数允许您计划函数执行

• 它将在给定的延迟后执行给定的函数。这个用于一次性执行函数
• 它将在延迟过后重复执行给定的函数。初始延迟后，将执行指定的函数。然后，计时器将被重置，一旦再次通过延迟，该功能将再次执行，以此类推

---

这两个函数都可以使用它们的对应项（和）来取消。

您在动画帧之间增加了5秒的延迟。他需要设置超时，而不是设置间隔，您应该编辑answer@meagar绝对正确。刚刚更新了答案，请修改有没有办法让这条线画在一个固定位置的div内？我问这个问题是因为当我拉伸浏览器窗口时，线条会在中移动。顺便问一下，移动是否也会变得容易？