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進行計時或構建函數調用，否則它與畫布動畫完全無關 。