HTML5 canvas 上的图像仅出现一帧

Question

长期潜伏但从未注册过。只是想先声明一下，我绝不是开发人员，只是为了好玩而修补和试验，所以如果我看起来真的很笨，我提前道歉。

我正在为 Twitch 流媒体制作动态覆盖，之前使用的是 AS3，但我现在切换到 HTML5。我正在尝试将图像加载到 canvas 上（最终将是使用 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 中看到它时，图像出现在第一帧然后消失。我不确定我应该如何让它无限期保留。稍后我需要能够对其进行动画处理，它会根据最新的 follow/donation/sub 等进行更改

我尝试在时间轴中延长帧本身，但是，这只是改变了循环所需的时间，并没有使图像本身停留更长的时间。我可能遗漏了一些非常简单的东西！

如有任何帮助，我们将不胜感激。谢谢！

Answer 1

如果您的方法使用 canvas 与 HTML 和 JS，则您的代码没有问题，不涉及任何库。然而，情况并非如此，因为您使用的是 Animate，并且使用它绘制图形的方式与使用默认 canvas 方法（如 drawImage()）不同。

Animate 包括 CreateJS 套件，其中包括 EaselJS 库，这允许您使用其他工具绘制到您的 canvas。其中两个是 Stage 对象（动画项目的视觉容器）和 Bitmap 对象（代表图像、canvas 或视频）。本题效果，只需要两个对象即可。

请注意下面的代码仅适用于第一帧：

/* 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); 
    }
}

HTML5 canvas 上的图像仅出现一帧

Image on HTML5 canvas only appearing for one frame

html

javascript

html5-canvas

animate-cc