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関数の引数を繰り返し呼び出します。2 番目の引数は、呼び出し間の遅延を指定します。遅延が経過した後、setTimeoutその関数引数を1 回呼び出します。

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 秒後にアラートが表示されます (時間はミリ秒単位で指定されることに注意してください)。

長い答え

関数の実行をスケジュールできる関数が 2 つあります。

  • 指定された遅延の後に指定された関数を実行するsetTimeout(func, delay) 。これは、関数の 1 回限りの実行に使用されます。
  • 遅延が経過した後、指定された関数を繰り返し実行するsetInterval(func, delay) 。初期遅延の後、指定された関数が実行されます。その後、タイマーがリセットされ、遅延がもう一度経過すると関数が再び実行されます。

どちらの機能も、対応する (clearTimeoutおよびclearInterval) を使用してキャンセルできます。

于 2012-09-26T15:20:22.777 に答える
0

setTimeoutを使用する必要があります。setTimeout は、一定の遅延の後に呼び出しを実行します。

スクリプトで使用されている関数setIntervalは、同じ関数を一定の間隔で何度も実行します。Stileの答えはあなたを助けるはずです

于 2012-09-26T15:18:00.517 に答える