Как нарисовать элемент холста с помощью Phaser 3? - PullRequest
Новая
       9

Как нарисовать элемент холста с помощью Phaser 3?

0 голосов
/ 03 марта 2019

Я использую графическую библиотеку JavaScript Phaser 3: https://phaser.io/phaser3

У меня есть элемент canvas, который я ранее создал вне библиотеки.Теперь я хочу нарисовать этот элемент холста на экране с помощью Phaser 3. В качестве примера игрушки рассмотрим следующий код: 

const game = new Phaser.Game({
    type: Phaser.AUTO,
    width: 1000,
    height: 1000,
    scene: {
        create,
    },
});

function create() {
    // Create a circle
    // From: https://www.w3schools.com/tags/canvas_arc.asp
    const circle = document.createElement('canvas');
    const ctx = circle.getContext('2d');
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw the circle using Phaser 3
    const circleTexture = this.textures.createCanvas('circle');
    circleTexture.setDataSource(circle);
    circleTexture.refresh();
    const circleImage = this.add.image(150, 200, 'circle');
}

При запуске этот код ничего не рисует на экране.Как правильно выполнить эту задачу?

1 Ответ

0 голосов
/ 03 марта 2019

Ответ таков: 

this.textures.addCanvas('circle', circle);

Итак, полный рабочий код выглядит следующим образом: 

const game = new Phaser.Game({
    type: Phaser.AUTO,
    width: 1000,
    height: 1000,
    scene: {
        create,
    },
});

function create() {
    // Create a circle
    // From: https://www.w3schools.com/tags/canvas_arc.asp
    const circle = document.createElement('canvas');
    const ctx = circle.getContext('2d');
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw the circle using Phaser 3
    this.textures.addCanvas('circle', circle);
    const circleImage = this.add.image(150, 200, 'circle');
}
...