Question

我只是按照此链接“http://jsfiddle.net/RHbUw/75/”中的示例来测试Easeljs中的beginBitmapFill方法。此示例在jsfiddel环境中通过Firefox，IE和Chrome浏览器正常工作。但是，无论我使用什么浏览器，它都不能在我的笔记本电脑上本地工作。我从jsfiddle链接附加了完全相同的代码。有人知道这段代码不能在本地工作的原因吗？

<!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

对于第二个问题，请尝试将代码放在img.onload函数中。这允许画架仅在图像数据可用后绘制图像。您也可以使用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';

Answer 2

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

easeljs beginBitmapFill方法无法在本地工作

2 个答案: