jquery - jQueryを使って線を引く

Question

次のようなランディング ページを希望するクライアントがいます。

彼が望んでいるのは、中央の画像と他の画像をつなぐ線がアニメーション化されることです (始点から終点まで描かれたかのように)。

これを達成するためのjQueryプラグインはありますか?

ありがとう！

Answer 1

HTML 5 キャンバスとストレート JS を使用して描画できます。

この HTML では:

<canvas id="mycanvas" width=500></canvas>

そして、このJavascript：

x = 50;
y = 75
startx = 0;
starty = 75;

function drawIt() {

    var c = document.getElementById("mycanvas");
    var ctx = c.getContext("2d");

    ctx.beginPath();
    ctx.lineWidth = "2";
    ctx.strokeStyle = "blue"; // Green path
    ctx.moveTo(startx, starty);
    ctx.lineTo(x, y);

    ctx.stroke(); // Draw it    
    if (x > 350) {
        window.clearInterval(timerId);
    } else if (y <= 25 && x >= 250) {
        starty = 25;
        x += 5;
    } else if (y <= 75 && x >= 250) {
        x = startx = 250;
        y -= 5;
    } else {
        x += 5;
    }
}
timerId = window.setInterval(drawIt, 30);

サンプル フィドル: http://jsfiddle.net/YjTsf/