Javascript 在画布中为移动图像设置动画

我刚开始使用canvas，但不知道我是否可以从哪里开始使用它得到一些帮助或建议。我现在在画布上画了一个圆圈，并尝试了多种我认为可行的方法，但我的头都绕不过去。在网上搜索时，我只能在画布中绘制形状的地方找到帮助

以下是我到目前为止的情况：

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);
    }
};

谁能帮我一下吗

jsFiddle：

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个变量，并添加了一些小函数，圆圈的XPO和YPO现在被存储起来，以便我们可以访问它们，我还创建了一个布尔变量animate，用于检查我们是否应该为圆圈设置动画

start函数只是将animate设置为true

停止函数simple将动画设置为false

setInterval只是每隔3毫秒反复运行相同的代码，所做的只是清除画布，然后重新绘制圆。如果我们不清除画布，当“动画”为真时，您将看到多个圆出现

---

我希望这会有所帮助

您是否查看过任何示例？那么你想达到什么目的呢？画布动画还是CSS动画？我正在尝试实现画布动画