javascript - 位图图像未显示在 Canvas 中

Question

我需要一些指导，因为我不清楚我做错了什么。我想做的就是在 Canvas 中心加载位图，但它没有显示。我的文件路径是正确的，但我没有看到我可能编码错误的内容，我哪里出错了？

var canvas, stage, centerX, centerY;

function init() {
    'use strict';

    canvas = document.getElementById("easel");
    stage = new createjs.Stage(canvas);
    centerX = canvas.width / 2;
    centerY = canvas.height / 2;

    var ship = new createjs.Bitmap("../images/millenium.png"),
        shipCenterX = ship.width / 2,
        shipCenterY = ship.height / 2;

    ship.x = centerX;
    ship.y = centerY;
    ship.regX = shipCenterX;
    ship.regY = shipCenterY;

    stage.addChild(ship);
    stage.update();
}

Answer 1

该库处理 Canvas 绘制的方式是调用 stage.update()，他们建议将其附加到“tick”事件(例如 http://www.createjs.com/docs/easeljs/classes/Stage.html )

基本上，我们需要不断地重绘 Canvas ，createjs 为我们提供了一个方法来做到这一点，如下所示:

createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
     stage.update();
}

但是，由于您尚未使您的 stage 全局可访问，因此我稍微调整了您的 init 函数，以便我们可以通过在末尾返回它来访问 stage功能。因此，您可以将全局范围中的 stage 设置为函数的结果:

var stage = init();

并且handleTick将默认使用该stage。但是，如果您正在考虑在 init() 函数之外重用对象，则可能需要考虑将它们传递给 init 函数或将其初始数据结构保留在 init< 之外 功能使它们更易于访问。

https://jsfiddle.net/jpgw1oka/