easeljs beginBitmapFill 方法在本地不起作用

Question

我只是按照link“http://jsfiddle.net/RHbUw/75/”中的一个示例来测试Easeljs 中的beginBitmapFill 方法。此示例在 jsfiddel 环境中通过 Firefox、IE 和 Chrome browsers.However 运行良好，无论我使用什么浏览器，它都无法在我的笔记本电脑上本地运行。我附上了来自 jsfiddle link 的完全相同的代码。有人知道这段代码不能在本地运行的原因吗？

<!DOCTYPE html>
  <html>
    <head>
     <script src="https://code.createjs.com/easeljs-0.8.0.min.js ">
     </script>
     <script>
     var stage = new createjs.Stage("demoCanvas");
     var s = new createjs.Shape();
     stage.addChild(s);
     var img = new Image();
     img.src = 'http://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png';
     s.graphics.beginBitmapFill(img, 'repeat-x');
     s.graphics.setStrokeStyle(1);
     s.graphics.beginStroke(createjs.Graphics.getRGB(255,0,0));
     s.graphics.drawRect(0,40,1000,1000);

     createjs.Ticker.addEventListener("tick", function() { stage.update(); });
     </script>
     </head>
     <body>
      <canvas id="demoCanvas" width="800" height="600" style="border: 1px #000 solid">
      </canvas>
    </body>
  </html>

Answer 1

问题已解决。我忘了将 js 代码放在一个函数中，并在 body 标记内使用 onload 调用该函数。对不起。但是，代码仍然存在一个小问题。图片在 IE 中打开时不会显示。我必须按 Enter 键才能显示图像。如果我单击刷新按钮，图像将消失。它与 Chrome 中的相同。很奇怪！

Answer 2

对于您遇到的第二个问题，请尝试将您的代码放入 img.onload 函数中。这允许 easeljs 仅在图像数据可用后才绘制图像。您也可以在代码开始后使用 PreloadJS（它也是 CreateJS 的一部分）加载图像。

var img = new Image();
img.onload = function(){
     s.graphics.beginBitmapFill(img, 'repeat-x');
     s.graphics.setStrokeStyle(1);
     s.graphics.beginStroke(createjs.Graphics.getRGB(255,0,0));
     s.graphics.drawRect(0,40,1000,1000);
}
img.src = 'http://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png';

easeljs beginBitmapFill 方法在本地不起作用

easeljs beginBitmapFill method not working locally

easeljs