jQuery 动画在画布上移动文本答案

【问题标题】：jQuery animate to move text on a canvasjQuery 动画在画布上移动文本
【发布时间】：2014-04-24 15:40:29
【问题描述】：

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

我找到了这段代码，

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

使用 jsfiddle - http://jsfiddle.net/AgPmN/

这正是我需要的，但它再次使用 $("#test").我可以更改它以使值只是一个 JavaScript 值并且它将在画布上滚动吗？

【问题讨论】：

当然可以，只要在画布上移动你想要的任何东西，now 变量包含当前值？您真的在问如何删除回调中的行并将now 变量用于其他内容吗？

标签： javascript jquery canvas text jquery-animate

【解决方案1】：

问题是

这正是我需要的，但它再次使用 $("#test").我可以吗更改它，使 value 只是一个 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);
}

FIDDLE

【讨论】：

非常酷。所以这只是选择一个任意值而不是一个元素？并在刷新时使用该值在画布上创建新的文本填充？我没有意识到您可以在不选择元素的情况下使用动画补间功能。 +1
@jshanley - 是的，你可以，较新版本的 jQuery 实际上有一个未记录的 $.Animation 内置补间的方法。它主要在内部使用，我认为他们将来会改进它尝试使用像 Greensock 这样的库来加快速度，这让 jQuery 在动画方面脱颖而出，但现在 step 方法可以让您使用 animate() 为几乎任何东西制作动画
啊，谢谢，这正是我想要做的。非常整洁。

【解决方案2】：

没有。 DOM 节点（也就是通过 HTML 标签呈现到内存中的内容）与 Canvas 像素绘图之间存在特定差异。

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

熟悉面向对象的javascript，上面的原因就一目了然了。

【讨论】：

为什么会遭到反对？这是对的。您不能简单地选择使用 jquery 绘制到画布上的文本并希望移动它。如果你想做画布动画，你需要使用setInterval或requestAnimationFrame创建一个快速重绘画布的函数，然后在该函数中更新文本位置。有一些库可以帮助解决这个问题，例如 KineticJS
@jshanley - OP 有代码，animate() 函数和 step 方法，并且想知道如何摆脱回调中的 jQuery 并在画布中设置动画，这是完全可行，但这个答案并没有真正回答这个问题。从问题中也可以清楚地看出，OP 有一个游戏并且知道如何将文本放到画布上，所以假设他理解 jQuery 选择器在画布中并不能真正工作，因为他专门询问如何替换 jQuery 选择器和在画布上移动一些东西。
@adeneo 我明白了，但是......赞成/反对票的想法只是响应“有用”或“无用”。关键是，如果其他人稍后提出这个问题，（可能是不太了解选择等的人）他们可能会发现这样的答案很有用。
我在这里，认为重点是回答实际问题？我明白你的意思，很多时候在搜索某些东西时，你会发现一些未被接受或没有真正回答问题的答案，实际上有你正在寻找的答案，但首先应该尝试回答这个问题，而这个答案实际上是错误的，根本不是问什么？

【解决方案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 进行计时或构建函数调用，否则它与画布动画完全无关。

【讨论】：