Question

您好我正在尝试学习如何使用EaselJS库，最终与一些EXTJS库结合使用但是我在将所有代码放入.Js文件时遇到了麻烦。我的js文件看起来像这样

var democanvas = document.createElement('canvas');
document.body.appendChild(democanvas);
democanvas.height = "400";
democanvas.width = "600";


function init() {
var canvas = document.getElementById("democanvas");
var stage = new createjs.Stage('canvas');
var im = new createjs.Bitmap("dbz.jpg");
 //  im.regX - im.image.width *.2; 
 //  im.regY - im.image.height *.2; 
stage.addChild(im);
stage.update();

im.addEventListener("click", function(){

var seed = new createjs.Bitmap("seed.jpg");
seed.alpha = 0.5;
seed.x = window.event.clientX;
seed.y = window.event.clientY;


stage.addChild(seed);
stage.update();
 }); //end seed evenlistener */

 } //end functin init()

这不起作用，但是如果我注释掉整个document.createElement（'canvas'）部分并且我应用

 <body onLoad="init();">
<canvas id="demoCanvas" width="1000" height="1000">
    alternate content 
</canvas>

到我的index.html文件它将开始工作:(我在te索引html的body标签中包含.js

编辑:::::::::::::::::::::::这是我当前的代码，除非我将画布添加到html页面，否则仍然没有显示任何内容：（

window.onload = function (){
var demoCanvas = document.createElement('canvas');
//document.body.appendChild(democanvas);
demoCanvas.height = "400";
demoCanvas.width = "600";
}

var stage;
function init() {
stage = new createjs.Stage("demoCanvas");
var text = new createjs.Text("Hello World", "bold 86px Arial", "#ff7700");

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

init();

Answer 1

另一件事 - 由于您使用的是图像路径，而不是完全加载的图像作为位图源，因此更新舞台时图像可能尚未就绪。您可以在图像上放置onload处理程序来更新阶段，或者先预先加载它们。

var image = new Image();
image.onload = handleLoad;
image.src = "src.jpg";

function handleLoad(event) { stage.update(); }

// You can also use the Bitmap
var bitmap = new createjs.Bitmap("src.jpg");
bitmap.image.onload = handleLoad;

您还可以勾选舞台以不断更新。这是一个快速查看问题的方法。

createjs.Ticker.addEventListener("tick", stage);
// OR
createjs.Ticker.on("tick", stage);

Answer 2

尝试以下方法：

document.body.onload = function(){

var democanvas = document.createElement('canvas');
document.body.appendChild(democanvas);
democanvas.height = "400";
democanvas.width = "600";


function init() {
  var canvas = document.getElementById("democanvas");
  var stage = new createjs.Stage('canvas');
  var im = new createjs.Bitmap("dbz.jpg");
   //  im.regX - im.image.width *.2; 
   //  im.regY - im.image.height *.2; 
  stage.addChild(im);
  stage.update();

  im.addEventListener("click", function(){

  var seed = new createjs.Bitmap("seed.jpg");
  seed.alpha = 0.5;
  seed.x = window.event.clientX;
  seed.y = window.event.clientY;


  stage.addChild(seed);
  stage.update();
   }); //end seed evenlistener */

 } //end functin init()

 init();
}

Answer 3

首先，您需要使用导航器的控制台在任何问题之前查看javascript的错误。

您将看到此错误：未捕获的TypeError：无法调用null的方法'appendChild'

这是因为你在加载html之前加载 document.body.appendChild（democanvas）; ，所以你的document.body为空。

这是方式：

function init() {
    var democanvas = document.createElement('canvas');
    document.body.appendChild(democanvas);
    democanvas.height = "400";
    democanvas.width = "600";

    var canvas = document.getElementById("democanvas");
    var stage = new createjs.Stage('canvas');
    var im = new createjs.Bitmap("dbz.jpg");
    //  im.regX - im.image.width *.2; 
    //  im.regY - im.image.height *.2; 
    stage.addChild(im);
    stage.update();

    im.addEventListener("click", function(){

    var seed = new createjs.Bitmap("seed.jpg");
    seed.alpha = 0.5;
    seed.x = window.event.clientX;
    seed.y = window.event.clientY;

    stage.addChild(seed);
    stage.update();
    }); //end seed evenlistener */

 } //end functin init()

Answer 4

我有同样的问题，我使用预加载器解决了它。您可以像这样使用PreloadJS预加载器：

    var preloader = new createjs.LoadQueue(true);
    preloader.addEventListener("complete",this.handleComplete.bind(this));

    var manifest = [

        {src:"./images/yourIMAGE.PNG"},
        //another image

    ];

为什么我的图像不显示出来

4 个答案: