javascript - jQuery animate 在 Canvas 上移动文本

Question

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

我找到了这段代码，

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

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

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

Answer 1

问题是

This is exactly what I need, but it again uses $("#test"). Can I change this so that value is just a JavaScript value and that it will scroll across a canvas?

是的，你可以，你可以去掉 animate() 回调中的 jQuery 并使用 now 变量来做任何你想做的事，因为实例在 Canvas 上移动文本

$({ 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