Добавить изображение холста поверх существующего изображения холста - PullRequest
Новая
       4

Добавить изображение холста поверх существующего изображения холста

0 голосов
/ 27 октября 2019

Я написал функцию для создания изображений с помощью canvas. с помощью этой функции части загружаются из большой картинки и соединяются в новую.

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

но не уживайтесь. может кто-нибудь помочь мне здесь?

Вот первое созданное изображение. 

function zeichnen(anzahl){
const image = new Image();
image.src = 'assets/walzen.png';
for(ii = 1; ii <= 5; ii++){
    const canvas = document.getElementById('w'+ii);
    const ctx = canvas.getContext('2d');
    image.addEventListener('load', e => {
        for(i = 0; i <= anzahl-1; i++){
            const hoehe = 110*i;
            var bild = walzen.frames[Math.floor(Math.random() * 7) + 1];
            ctx.drawImage(image, bild.frame.x, bild.frame.y, bild.frame.w, bild.frame.h, 0, hoehe, bild.frame.w, bild.frame.h);
        }
    });
}}

Теперь, с другой функцией, изображение будет добавлено к первому наверху. 

function zeichnenZusatz(ii,anzahl){
const image = new Image();
const canvas = document.getElementById('w'+ii);
const ctx = canvas.getContext('2d');
image.src = 'assets/walzen.png';
ctx.canvas.height = 110*anzahl;
image.addEventListener('load', e => {
    for(i = 0; i <= anzahl-1; i++){
        const hoehe = 110*i;
        var bild = walzen.frames[Math.floor(Math.random() * 7) + 1];
        ctx.drawImage(image, bild.frame.x, bild.frame.y, bild.frame.w, bild.frame.h, 0, hoehe, bild.frame.w, bild.frame.h);
    }
});}

Единственная проблема заключается в замене уже существующего образа. Заранее благодарю за помощь

...