HTML5 Canvas - рисовать изображение в цикле обновления

Question

У меня есть холст 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, так как я скопировал рабочий метод в новый цикл.Консоль не показывает ошибок.

Вы можете увидеть 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>

Это то, что вы хотите?