javascript - HTML5 Canvas 上的图像仅出现一帧

Question

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

我正在为 Twitch 流媒体制作动态叠加层，之前使用的是 AS3，但现在我已切换到 HTML5。我正在尝试将图像加载到 Canvas 上(最终将是使用 Twitch API 获取的个人资料图片……但一次一个步骤)。我正在使用 Adob​​e Animate，到目前为止，我在图层第一帧的 Action 中应用了以下内容:

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 中看到它时，图像出现在第一帧然后消失。我不确定我应该如何让它无限期保留。稍后我需要能够对其进行动画处理，它会根据最新的关注/捐赠/订阅等进行更改。

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

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

Answer 1

如果您的方法是使用带有 HTML 和 JS 的 Canvas ，而不涉及任何库，那么您的代码是可以的。然而，情况并非如此，因为您使用的是 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); 
    }
}