動畫在畫布中移動圖像

Question

我剛開始使用畫布，但想知道我是否可以從此處開始獲得一些幫助或建議。 我目前在畫布上繪制了一個圓圈，並嘗試了多種方法，我認為可能可行，但無法解決。 在線搜索時，我只能在畫布上繪制形狀的地方真正找到幫助。

這是我到目前為止的內容： JSFiddle

JavaScript：

var one = document.getElementById("canvOne");
var canvOne = one.getContext("2d");
var img = new Image();
img.onload = function(){
    canvOne.drawImage(img, 10, 10);
};

img.src = "img/circle.jpg";

function oneStart(){
    for(var i = 0; i < 300; i++){
        img.style.left = i + 'px';
        setTimeout(oneStart, 1000);
    }
};

有人可以幫我嗎？

Answer 1

jsFiddle： http : //jsfiddle.net/8eLL7L5L/3/

javascript

//canvas one
var one = document.getElementById("canvOne");
var canvOne = one.getContext("2d");
var img = new Image();

var animate = false;
var circlePosX = 10;
var circlePosY = 10;

img.onload = function () {
    canvOne.drawImage(img, circlePosX, circlePosY);
};

img.src = "http://www.alexvolley.co.uk/other/circle.jpg";

var start = function()
{
    animate = true;
}

var stop = function()
{
    animate = false;   
}

setInterval(function () {
    // Only update circle position if animate is true
    if (animate) {
        circlePosX += 1;
        canvOne.fillStyle = "#FFF";
        canvOne.fillRect(0, 0, one.width, one.height);
        canvOne.drawImage(img, circlePosX, circlePosY);
    }
}, 3);

我所做的只是創建了3個變量，並添加了一些小函數，現在存儲了圓的XPos和YPos，以便我們可以訪問它們。我還創建了一個bool變量animate ，用於檢查是否應為圓設置動畫。

start函數只是將animate為true

停止功能簡單​​地將animate為false

setInterval只會每3毫秒重復運行一次相同的代碼，所有這些操作就是清除畫布，然后重畫圓圈。 如果我們不清除畫布，則在動畫設置為true時會看到多個圓圈。

希望這對您有所幫助