HTML5 Canvas - 在更新循环中绘制图像

Question

我有一个 html5 画布，我正在用它画圆圈。 这些圆圈的中心需要图像，但也需要更新。 在this SO question的帮助下，我想出了这段代码来绘制所有内容：

 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 方法，因为我已将工作方法复制到新循环中。 控制台没有显示错误。

你可以在这里看到一个 JSFiddle

Answer 1

您遇到的问题是您在每一帧的draw函数中加载图像，而不是等待它被加载。

我已经稍微调整了您的代码，以便它会根据您的意愿加载图像并将其附加到您的圈子。

 var c = document.getElementById('canvas'); c.width = window.innerWidth; c.height = 400; var ctx = c.getContext("2d"); var eighthWidth = c.width / 8; var Color1 = "#9c9c9b"; var Color2 = "#9c9c9b"; 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.image = new Image(); this.image.src = "https://www.gstatic.com/webp/gallery3/1.png"; var _this = this; this.image_loaded = false; this.image.addEventListener('load', function() { _this.image_loaded = true; } ); this.draw = function() { 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 = function() { //if(!this.image_loaded) return; this.x += 1; this.draw(); } } function animate() { ctx.clearRect(0, 0, window.innerWidth, 400); Circle1.update(); Circle2.update(); requestAnimationFrame(animate); } animate();

 <canvas id="canvas" style="width:100%;"></canvas>

这是你想要的吗？