Easel.js>这段代码有什么问题?

Nic*_*jen 2 html5 canvas easeljs

这段代码有什么问题?:S ..我的画布保持空白.图片网址正确且图片已加载.

这是我的engine.js文件:

var canvas;
var stage;

function init()
{
    canvas = document.getElementById("canvas");
    stage  = new Stage(canvas);

    playerImg        = new Image();
    playerImg.src    = 'img/player/walkingbl.png';
    playerImg.onload = onPlayerLoaded;

    Ticker.setFPS(30);
    Ticker.addListener(window);
}

function tick()
{
    stage.update();
}

function onPlayerLoaded()
{
    console.log(playerImg);
    player      = new Bitmap(playerImg);
    player.x    = 300;
    player.y    = 450;

    stage.addChild(player);

    console.log('Player added to stage');
}

$(document).ready(function(){

init();

});
Run Code Online (Sandbox Code Playgroud)

这是我的index.html文件:

<!DOCTYPE html>
<html>
<head>
          <title>Game Engine</title>
          <link rel="stylesheet" href="css/main.css" />
</head>
<body>
      <div id='container'>
           <canvas id='#canvas' width='1000' height='350'></canvas>
      </div>

            <script src="js/jquery.js"></script>
            <script src="js/easel.js"></script>
        <script src='js/engine.js'></script>
</body>
Run Code Online (Sandbox Code Playgroud)

我是整个easel.js的新手,从未对Flash或动作做过任何事情.我是一名PHP开发人员,所以这对我来说是一个非常大的转变.缺乏文档/教程/示例,使我很难学习如何使用easel.js.所以,如果您有任何指示或资源供我查看.请分享!

Enr*_*ent 5

这条线错了:

<canvas id='#canvas' width='1000' height='350'></canvas>
Run Code Online (Sandbox Code Playgroud)

ID不需要#.正确的是:

<canvas id='canvas' width='1000' height='350'></canvas>
Run Code Online (Sandbox Code Playgroud)

但我不会使用"canvas"这个词作为标识符,因为它可能会与标签混淆.更好用:

<canvas id='mycanvas' width='1000' height='350'></canvas>
Run Code Online (Sandbox Code Playgroud)

并更改JS代码:

canvas = document.getElementById("mycanvas");
Run Code Online (Sandbox Code Playgroud)