javascript HTML5 - 延迟画布绘制

HTML5 - delay canvas drawing

提问by jncunha

I have a simple chunk of code to draw a line in a page. My problem is that I don't know much about HTML5 or JS and I need help to set a delay on the drawing of this line. I want to be able to choose if I want to see it drawing instantly when opening the page or define it to have 5 seconds delay before being draw.

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

Here it is:

这里是：

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

Thank you for the help!

感谢您的帮助！

回答by Strille

Wrap it in a setTimeout:

将其包装在 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);

The above waits 3 seconds (3000 milliseconds) before starting the drawing. Also, whenever you start an interval with setInterval you should store the return value so you can stop the interval later. The code above stops the interval when it's done drawing with clearInterval().

以上在开始绘图之前等待 3 秒（3000 毫秒）。此外，每当您使用 setInterval 开始一个间隔时，您应该存储返回值，以便您可以稍后停止该间隔。上面的代码在使用 clearInterval() 完成绘制后停止间隔。

回答by meagar

Wrap your setIntervalcall in a setTimeoutcall. setIntervalinvokes its function argument repeatedly, where the second argument specifies the delay between invocations. setTimeoutinvokes its function argument once, after the delay has passed.

将您的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);

回答by Adriano Carneiro

You need to use setTimeout:

你需要使用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);

回答by BBog

You need to use setTimeout. setTimeout runs a call after a certain delay.

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

The function used in your script, setInterval, runs the same function over and over again at a certain interval. Strile's answershould help you

脚本中使用的函数setInterval以特定时间间隔反复运行相同的函数。Strile 的回答应该对你有所帮助

回答by Nikola Radosavljevi?

Short answer

简答

Use setTimeoutfunction to delay execution. What setTimeoutdoes is set up a timer which will execute specified function after specified amount of time. E.g.

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

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

will show an alert after 5 seconds (note that time is specified in milliseconds).

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

---

---

Long answer

长答案

There are two functions that allow you to schedule a function execution.

有两个函数允许您安排函数执行。

• setTimeout(func, delay)which will execute given function after given delay. This one is used for one-off execution of functions.
• setInterval(func, delay)which will execute given function repeatedly after delay passes. After initial delay, specified function will be executed. Timer will then be reset and function will be executed again once delay passes once more, and so on.

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

Both functions can be canceled using their counterparts (clearTimeoutand clearInterval).

这两个功能都可以使用它们的对应项（clearTimeout和clearInterval）取消。