HTML5 - 延迟画布绘图

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()完成绘制时停止间隔.