Javascript - рисование некоторых изображений на холсте в цикле, используя drawimage и arc

Я новичок в JS, и я пытаюсь отображать некоторые дугообразные изображения в некоторых случайных координатах, но при выполнении кода ниже я могу отображать только первое изображение в формате дуги, остальные не отображаются. Я уже проверил, что цикл прокручивается, однако изображения не появляются.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); 

Promise.all(imgs.map(function(image) {
    return new Promise(function(resolve, reject) {
      image.onload = resolve;
    });
  }))
  .then(function() {
        for (var i = 0; i < Object.size(coordx); i++) 
        {
            //console.log(i);

            var X = coordx[i];
            var Y = coordy[i];
            var R = 25;

            ctx.save();
            ctx.beginPath();
            ctx.arc(X, Y, R, 0, Math.PI*2,true);
            ctx.strokeStyle = "#FFFFFF";
            ctx.stroke();
            ctx.clip();
            ctx.drawImage(imgs[i], X-R, Y-R, R*2, R*2);
        };
  });

Когда я запускаю приложение, я не вижу ошибок, только другие изображения за пределами первого действительно не появляются.

0 ответов

Другие вопросы по тегам