Изображение на холсте HTML5 появляется только для одного кадра

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

Я работаю над динамическим оверлеем для потоковой передачи Twitch и ранее использовал AS3, но теперь перешел на HTML5. Я пытаюсь загрузить изображение на холст (которое в конечном итоге будет изображением профиля, полученным с помощью Twitch API... но по одному шагу за раз). Я использую Adobe Animate, и до сих пор я применил следующее в действиях к первому кадру слоя:

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

show_image();

function show_image() {
    source_image = new Image();
    source_image.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';
    source_image.onload = function () {
        context.drawImage(source_image, 100, 100);
    }
}

Когда я нажимаю Ctrl + Enter и вижу его в Chrome, изображение появляется для первого кадра, а затем исчезает. Я не уверен, как я должен заставить его оставаться на неопределенный срок. Мне нужно иметь возможность анимировать его позже, и он будет меняться в зависимости от последних подписок/пожертвований/подписок и т. д.

Я попытался расширить сам кадр на временной шкале, однако это просто изменило длительность цикла и не заставило само изображение оставаться дольше. Я, наверное, упускаю что-то очень простое!

Любая помощь будет оценена по достоинству. Спасибо!


javascript html html5-canvas animate-cc
person thefyrewire    schedule 31.10.2017    source источник
comment
согласно приведенному выше коду javascript, вы должны получить ошибку javascript. Проверьте консоль ошибок браузера.   -  person Syed Ekram Uddin    schedule 31.10.2017
comment
В Chrome я делаю это с помощью Ctrl+Shift+J, верно? Это не дало мне никаких ошибок. Я попытался перезагрузить и проверить снова, но он по-прежнему пуст.   -  person thefyrewire    schedule 31.10.2017
comment
Как я проверил, в вашем коде нет ошибок, но поскольку вы используете Adobe Animate, я думаю, вам нужен другой подход. Вы пробовали использовать библиотеку CreateJS? (входит в состав Animate)   -  person cristiancajiaos    schedule 31.10.2017
comment
Ах! Благодарю вас! Я не знал, что могу использовать CreateJS для загрузки изображений! Я использовал var bitmap = new createjs.Bitmap("https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png"); stage.addChild(bitmap);, и изображение успешно появилось на холсте навсегда :D Я протестировал анимацию изображения с помощью GSAP, и оно работало безупречно. Спасибо еще раз! Не стесняйтесь поставить это как ответ, чтобы я мог отметить это!   -  person thefyrewire    schedule 31.10.2017
comment
извините, моя ошибка по поводу ошибки javascript в первом комментарии. позже я запускаю код на jsbin.com/ranajejeke/edit?html,js,output и он отлично работает. я заметил, что при использовании 0,0 вместо 100 100 изображение четко отображается. также Adobe Animate может добавить некоторый код анимации в исходный код, возможно, поэтому он появляется один раз и снова исчезает.   -  person Syed Ekram Uddin    schedule 31.10.2017

Ответы (1)


arrow_upward
3
arrow_downward

С вашим кодом все в порядке, если ваш подход использует холст с HTML и JS без каких-либо библиотек. Однако это не так, поскольку вы используете Animate, и способ рисования графики с его помощью отличается от использования методов холста по умолчанию, таких как drawImage().

Animate включает пакет CreateJS, в который входит библиотека EaselJS, что позволяет использовать другие инструменты для рисования на холсте. Двумя из них являются объект Stage, визуальный контейнер вашего анимационного проекта, и объект Bitmap, представляющий изображение, холст или видео. Для эффектов этого вопроса требуются только оба объекта.

Обратите внимание, что приведенный ниже код только для первого кадра:

/* It is not necessary to declare the canvas or stage element,
   as both are already declared. At this point the stage is ready to be drawn */

show_image();

function show_image() {
    var source_image = new Image();
    source_image.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';

    source_image.onload = function(event) {
        /* A new Bitmap object is created using your image element */ 
        var bmp = new createjs.Bitmap(event.currentTarget);

        /* The Bitmap is added to the stage */  
        stage.addChild(bmp); 
    }
}
person cristiancajiaos    schedule 31.10.2017