使用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/