2

我有一段简单的代码可以在页面中画一条线。我的问题是我对 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>

感谢您的帮助！

4

5 回答 5

7

将其包装在 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() 完成绘制后停止间隔。

于 2012-09-26T15:16:00.517 回答
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);
于 2012-09-26T15:13:10.830 回答
2

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);
于 2012-09-26T15:16:45.663 回答
0

简短的回答

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

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

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

长答案

有两个函数可让您安排函数执行。

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

这两个功能都可以使用对应的 (clearTimeout和clearInterval) 取消。

于 2012-09-26T15:20:22.777 回答
0

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

脚本中使用的函数setInterval以一定的时间间隔一遍又一遍地运行相同的函数。斯特莱尔的回答应该对你有所帮助

于 2012-09-26T15:18:00.517 回答