尝试将图像放在画布上的弧线内-javascript

Question

Hey I would really like someone to help me out here. So, basically I am just tryng out my canvas skills. I want to make a shooting game where I shoot on a bunch of emojies tavelling on different y-axis points, different heights, and sliding on the x axis with different velocities.

I have a few emogi images I renamed them in enumrable. Where I struggles is displaying does images inside an arc. Also, I want the entire image to display in a 10 by 10/etc and not just to overflow it.

I would really like someone to help me out here, thanks.

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var height = canvas.height = window.innerHeight;
var width = canvas.width = window.innerWidth;
function random(min, max) {
    var num = Math.floor(Math.random() * (max - min)) + min;
    if (num === 0) {
       return 2;
    }
    return num;
}
function Target(x, y, velX, radius, image) {
    this.x = x;
    this.y = y;
    this.velX = velX;
    //this.velY = velY;
    this.radius = radius;
    this.image = image;
}
Target.prototype.update = function () {
    if (this.x + this.radius >= width) {
        this.velX = -this.velX;
    }
    if (this.x + this.radius <= width) {
        this.velX = -this.velX;
    }
    /*if (this.y + this.radius >= height) {
        this.velY = -this.velY;
    }
    if (this.y + this.radius >= 0) {
        this.velY = -this.velY;
    }*/
    this.x += this.velX;
    //this.y += this.velY; 
};
Target.prototype.draw = function () {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, true);
    ctx.fillStyle = ctx.createPattern(this.image, 'no-repeat');
    ctx.fill();


    this.update();
};


//var target1 = new Target(30, 40, 20, 20);
function loop() {
    ctx.fillRect(0, 0, width, height);
    var targets = [];
    var img = new Image();
    while (targets.length < 25) {
        img.src = './images/emogi' + random(1, 6) + '.jpg';
        img.repeat = 'no-repeat';
        img.maxHeight = 10;
        img.maxWidth = 10;
        var target = new Target(
            random(100, 500),
            random(100, 500),
            random(10, 30),
            20,
            img
        );
        targets.push(target);
    }
    for (var i =0; i< targets.length; i++) {
        target[i].draw();
        target[i].update();
    }
    requestAnimationFrame(loop);

}
loop();

Answer 1

Your problem is that you don't see the image. This happens because you start loading image and then immediately draw it. When you draw, there's no image. It hasn't loaded yet!

To fix it, you have to preload all images

Example

Let images = {
    “emoji”: {}
};

function loadImages() {
    return new Promise((resolve, reject) => {
        // initiate loading
        // wait for all to load
        // resolve promise
    });
}

loadImages.then(startGame);

You might find this question helpful Javascript/HTML5 using image to fill canvas