jQuery动画在画布上移动文本

Question

我见过的所有使用动画的例子都使用HTML元素。 在我的游戏中，我只有画布元素，所有文本都在画布上绘制。 我希望能够在屏幕上创建文本并让它在canva上从左向右滚动。

我找到了这段代码，

$({ left: 0 }).animate({ left: 10 }, {duration: 1000, step: function(now, fx) {
  $("#test").css('left', now);
}});

与jsfiddle - http://jsfiddle.net/AgPmN/

这正是我需要的，但它再次使用$（“＃test”）。 我可以更改此值，以便该值只是一个JavaScript值，并且它将在画布上滚动吗？

Answer 1

问题是

这正是我需要的，但它再次使用$（“＃test”）。 我可以更改此值，以便该值只是一个JavaScript值，并且它将在画布上滚动吗？

是的，你可以，你可以在animate()的回调中摆脱jQuery，并将now变量用于你想要的任何东西，例如在画布上移动文本

$({ left: 300 }).animate({ left: 10 }, {duration: 5000, step: function(now, fx) {
    moveMyFrackingCanvas(now);
}});

function moveMyFrackingCanvas(val) {
    var c=document.getElementById("myCanvas");
    c.width = c.width;
    var ctx=c.getContext("2d");
    ctx.font="30px Verdana";
    var gradient=ctx.createLinearGradient(0,0,c.width,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");
    ctx.fillStyle=gradient;
    ctx.fillText("Holy Crap!", val, 90);
}

小提琴

Answer 2

不。在DOM节点（也就是通过HTML标签渲染到内存中）与Canvas像素绘制之间存在特定的差异。

如果您在Google Chrome中使用console.dir（）一些jQuery对象，您将看到与该元素相关联的所有属性（dom节点）。 画布上的图纸不是这种情况。 Canvas本身具有与其他节点类似的属性，但实际渲染的绘图不会呈现为DOM结构。 它的JUST像素数据，如adobe photoshop，而不是adobe illustrator中的节点。

熟悉面向对象的javascript，上面的原因会变得非常明显。

Answer 3

看起来有人在这里回答了这个问题： using-jquery-animate-on-canvas-objects

它指的是绘制形状，但除非您在画布的层次结构中设置其他HTML / XML / SVG元素的动画，否则绘图文本应该略有不同。

至少给出一个简单的答案，我自己，但是......无论你使用什么函数来渲染文本并绘制​​到画布上，都要在一段时间内运行它，修改文本绘制的位置。 您可以使用setTimeout或setInterval来完成此操作。

function drawText(position)
{ ... }

function runItAll()
{
    pos1 = {x:0,y:0};
    pos2 = {x:10,y:20};
    var time = 4000; // 4 seconds
    var start = new Date().getTime()
    var interval = setInterval(function()
    {
        // Get the progress int time over animation span in a value between 0-1.
        var progress = (new Date().getTime() - start) / time;

        // Get the new position value, given pos1 and pos2.
        var pos = {
            x:(pos2.x-pos1.x)*progress + pos1.x,
            y:(pos2.y-pos1.y)*progress + pos1.y
        };

        // Run whichever function it is that does the drawing.
        drawText(pos);
    },30);

    // Clear the interval on animation completion.
    setTimeout(function(){clearInterval(interval);},time);
}

我没有测试过代码，但这应该是它的要点。

哦。 对。 除非你使用jQuery进行计时或构建函数调用，否则它与画布动画完全无关 。