Javascript HTML5画布-在更新循环中绘制图像

我有一个html5画布，我用它画圆圈。这些圆的中心需要图像，但也需要更新。借助 我想出了这个代码来画所有的东西：

 var Circle1 = new Circle((c.width / 8) + (c.width / 2), 200, eighthWidth / 2.5, Color1, "1");    
 var Circle2 = new Circle(c.width - eighthWidth, 200, eighthWidth / 2.5, Color2, "2");

 function Circle(x, y, radius, color, name) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.name = name;

    this.draw = function () {
        var MiddleImage = new Image();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
        ctx.drawImage(MiddleImage, this.x - MiddleImage.width / 2, this.y - MiddleImage.height / 2);
        MiddleImage.src = "/Images/" + this.name + ".png";
    }

    this.update = function () {
        this.x += 1;
        this.draw();
    }

    this.update();
}

这并不像我希望的那样画出图像，但是如果我像下面这样用这种方法画出来，它能工作吗

function drawCircle() {
    var MiddleImage = new Image();
    MiddleImage.onload = function () {
        var X = c.width - eighthWidth;
        var Y = 200;
        ctx.beginPath();
        ctx.arc(X, Y, eighthWidth / 2.5, 0, 2 * Math.PI);
        ctx.clip;
        ctx.fillStyle = Color1;
        ctx.fill();
        ctx.closePath();
        ctx.drawImage(MiddleImage, X - MiddleImage.width / 2, Y - MiddleImage.height / 2);
    };
    BankImage.src = "/Images/1.png";

    requestAnimationFrame(drawCircle);
}

我还尝试使用Image.onLoad方法，因为我已经将工作方法复制到新循环中。 控制台没有显示任何错误

---

您可以看到一个JSFIDLE

您遇到的问题是，您在每一帧都在

draw

函数中加载图像，而不是等待加载

我已经稍微调整了你的代码，这样它会加载图像并根据你的意愿将其附加到你的圆圈上

var c=document.getElementById（'canvas'）；
c、 宽度=window.innerWidth；
c、 高度=400；
var ctx=c.getContext（“2d”）；
var eighthWidth=c.宽度/8；
var Color1=“#9c9c9b”；
var Color2=“#9c9c9b”；
var Circle1=新的圆圈（（c.width/8）+（c.width/2），200，第八宽度/2.5，颜色1，“1”）；
var Circle2=新的圆圈（c.宽度-八宽，200，八宽/2.5，颜色2，“2”）；
函数圆（x、y、半径、颜色、名称）{
这个.x=x；
这个。y=y；
这个半径=半径；
这个颜色=颜色；
this.name=名称；
this.image=新图像（）；
this.image.src=”https://www.gstatic.com/webp/gallery3/1.png";
var_this=这个；
this.image_loaded=false；
this.image.addEventListener（'load'，function（）{
_this.image_loaded=true；
} );
this.draw=函数（）{
ctx.beginPath（）；
ctx.arc（this.x，this.y，this.radius，0，Math.PI*2）；
ctx.fillStyle=this.color；
ctx.fill（）；
ctx.closePath（）；
ctx.save（）；
ctx.clip（）；
ctx.drawImage（this.image，this.x-this.image.width/2，this.y-this.image.height/2）；
ctx.restore（）；
}
this.update=函数（）{
//如果（！this.image_loaded）返回；
这个.x+=1；
这个.draw（）；
}
}
函数animate（）{
ctx.clearRect（0,0，window.innerWidth，400）；
圆圈1.update（）；
圆圈2.update（）；
请求动画帧（动画）；
}
制作动画（）
我认为圆弧计算可能会中断。圆弧绘制和更新非常好，我不知道你的意思。请将完整的代码片段添加到JSFIDLE，以便我们可以将完整的代码片段添加到JSFIDLE，以便我们可以在此处查看JSFIDLE：