画布:Animate贝塞尔曲线绘制

Question

我试图从左到右划出一条穿过画布的线.即时通讯还处于早期阶段,要做到这一点,使用以下功能来做一步一步的动画

timer = window.setInterval(draw_line, 30);

我的绘图功能是这样的

function draw_line()
    {
        context.fillStyle = "#000";
        context.fillRect(0, 0, canv.width, canv.height);

            context.beginPath();
        context.lineWidth = 2;
        context.strokeStyle = '#fff';

            //Where p1, p2, cp1, cp2 are point objects that has x & y values already defined    
        context.moveTo(p1.x, p1.y);
        context.bezierCurveTo(cp1.x,cp1.y,cp2.x,cp2.y,p2.x,p2.y);
        context.stroke();
        context.closePath();

            // now i have to move p1, p2 ,cp1,cp2
            // now here is my problem
    }

我明白我需要移动 p1.x+= a random number;,同样对于cp1和cp2,但是p2的终点应该遵循相同的轨道!我怎么能实现这一目标？

谢谢

Answer 1

编辑后的答案

\n\n

有了你的澄清，我想我现在可以适当地回答这个问题了。

\n\n

为了让终点沿着起点穿过画布的路径移动，您必须存储历史值。在此示例中，http://jsfiddle.net/mobidevelop/bGgHQ/，我使用鼠标移动来填充最后 16 个位置的缓冲区，然后使用它通过迭代 RingBuffer 来形成通过点的贝塞尔曲线。

\n\n

function RingBuffer(length) {\n    this.length = length;\n    this.pointer = 0;\n    this.buffer = [];\n}\nRingBuffer.prototype.get = function(index) {\n    if (index < 0) {\n        index += this.length;        \n    }\n    return this.buffer[index];\n}\nRingBuffer.prototype.push = function(value) {\n    this.buffer[this.pointer] = value;\n    this.pointer = (this.length + this.pointer +1) % this.length;    \n}\n\nvar c = document.getElementById("myCanvas");\nvar context =c.getContext("2d");\n\ntimer = window.setInterval(draw_line, 30);\nfunction Point(x,y) {\n    this.x = x;\n    this.y = y;\n}\nPoint.prototype.translateX = function(x) {\n    return this.x += x;\n};\nPoint.prototype.translateY = function(y) {\n    return this.y += y;\n};\n\nfunction draw_line()\n{\n    context.fillStyle = "#000";\n    context.fillRect(0, 0, c.width, c.height);\n\n    var pointer = history.pointer;\n    context.beginPath();\n    context.lineWidth = 2;\n    context.strokeStyle = \'#F00\';     \n    for (iteration = 0, count = 15; iteration < count; iteration += 3) {\n        var p1 = history.get(--pointer);\n        var p2 = history.get(--pointer);\n        var p3 = history.get(--pointer);\n        var p4 = history.get(--pointer);        \n\n        if (p1 && p2 && p3 && p4) {\n\n            context.moveTo(p1.x, p1.y);\n            context.bezierCurveTo(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);\n\n        }\n        pointer++;\n    }\n    context.stroke();\n    context.closePath();    \n\n}\n\nvar history = new RingBuffer(16);\nvar lastGrab = new Date();\nc.addEventListener(\'mousemove\', function() {\n    now = new Date();\n    if (now - lastGrab > 15) {\n        history.push(new Point(event.clientX - c.offsetLeft, event.clientY - c.offsetTop)); \n        lastGrab = now;\n    }    \n});\xe2\x80\x8b\n

\n\n\n\n

出于历史目的，之前的答案留在下面。

\n\n

我不确定我完全理解你想要实现的目标，但我认为你需要做的就是将你的所有观点转化为相同的值。这将导致穿过画布的线保持相同的形状。像这样的东西：

\n\n

JSFiddle

\n\n

var c = document.getElementById("myCanvas");\nvar context =c.getContext("2d");\n\ntimer = window.setInterval(draw_line, 30);\nfunction Point(x,y) {\n    this.x = x;\n    this.y = y;\n}\nPoint.prototype.translateX = function(x) {\n    return this.x += x;\n};\nPoint.prototype.translateY = function(y) {\n    return this.y += y;\n};\n\nvar p1 = new Point(0,0);\nvar p2 = new Point(100,100);\nvar cp1 = new Point(15,45);\nvar cp2 = new Point(85,45);\n\nfunction draw_line()\n{\n    context.fillStyle = "#000";\n    context.fillRect(0, 0, c.width, c.height);\n\n    context.beginPath();\n    context.lineWidth = 2;\n    context.strokeStyle = \'#fff\';\n\n        //Where p1, p2, cp1, cp2 are point objects that has x & y values already defined    \n    context.moveTo(p1.x, p1.y);\n    context.bezierCurveTo(cp1.x,cp1.y,cp2.x,cp2.y,p2.x,p2.y);\n    context.stroke();\n    context.closePath();\n\n    p1.translateX(1);\n    p2.translateX(1);\n    cp1.translateX(1);\n    cp2.translateX(1);\n\n    if (p1.x > 300) {\n        p1.translateX(-400);\n        p2.translateX(-400);\n        cp1.translateX(-400);\n        cp2.translateX(-400);        \n    }\n}\n

\n\n

除非我误解了目标......

\n