Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/70.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 未定义不是一个函数吗?_Javascript_Html_Visual Studio 2013_Easeljs - Fatal编程技术网

Javascript 未定义不是一个函数吗?

Javascript 未定义不是一个函数吗?,javascript,html,visual-studio-2013,easeljs,Javascript,Html,Visual Studio 2013,Easeljs,我正在VS2013的web应用程序中创建一个非常简单的应用程序 HTML <canvas id="sprite" height="400" width="300"></canvas> <script src="JS/TestGame.js"></script> 我在chrome javascript控制台中遇到以下错误 未捕获类型错误:未定义不是函数TestGame.js:10 改变 var imgPath = 'Icons/baby_b

我正在VS2013的web应用程序中创建一个非常简单的应用程序

HTML

<canvas id="sprite" height="400" width="300"></canvas>
    <script src="JS/TestGame.js"></script>
我在chrome javascript控制台中遇到以下错误

未捕获类型错误:未定义不是函数TestGame.js:10

改变

var imgPath = 'Icons/baby_bear.png';
var bear1 = new createjs.Bitmap(imgPath);
var bear2 = new createjs.Bitmap(imgPath);
var bear3 = new createjs.Bitmap(imgPath);
bear2.x = 200;
bear3.x = 400;
var stage = new createjs.Stage("sprite");
stage.addChild(bear1, bear2, bear3);
stage.update();

具有讽刺意味的是,现在javascript控制台没有抱怨任何事情,但我的熊没有显示出来?

我的第一个倾向是说文档。getElementById(“sprite”)没有找到元素,因此结果未定义。因为undefined不是一个对象,所以下一行将给出该错误。试试这个

...
var stage = document.getElementById("sprite");
if(!stage){
    alert("canvas not found")
}

stage.addChild(bear1, bear2, bear3);

我相信您的问题是,您试图用一个addChild方法添加3个子对象,而它只需要1个参数。具有3个参数的addChild定义可能不存在。 您可能希望尝试将该行分成3行,如下所示:

stage.addChild(bear1);
stage.addChild(bear2);
stage.addChild(bear3);

addChild方法实际上可以处理多个参数。详情如下:


我认为您最好检查是否包含CreateJS库。没有显示任何内容的原因是您在请求图像后立即更新了后台文件,因此在后台文件绘制时不会加载这些文件

您需要:

  • 使用Ticker不断更新stage(只有出于其他原因而这样做时才是好的)
  • 监听图像上的onload,并更新stage
  • 确保在更新阶段之前加载内容。例如,检查我们的预载JS 下面是#2的一个快速示例。我只建议你做一些快速的事情。如果你构建了一个更复杂的应用程序,你应该考虑预加载内容。p>
    var imgPath = 'Icons/baby_bear.png';
    var image = new Image();
    image.onload = draw;
    image.src = imgPath;
    
    function draw() {
        var bear1 = new createjs.Bitmap(image);
        var bear2 = new createjs.Bitmap(image);
        var bear3 = new createjs.Bitmap(image);
        bear2.x = 200;
        bear3.x = 400;
        var stage = new createjs.Stage("sprite");
        stage.addChild(bear1, bear2, bear3);
        stage.update();
    }
    
    请注意,我还更改了其他内容:第一个是使用相同的图像引用,而不是将字符串路径传递给所有3个。通过传递字符串,可以在后台为每个实例创建图像,而不是共享引用,这对于内存和性能来说会更好

    最后一个注意事项是,您可以更改示例以立即设置所有内容,并且仅在图像加载时调用
    stage.update()

    var imgPath = 'Icons/baby_bear.png';
    var image = new Image();
    image.onload = draw;
    image.src = imgPath;
    
    var bear1 = new createjs.Bitmap(image);
    var bear2 = new createjs.Bitmap(image);
    var bear3 = new createjs.Bitmap(image);
    bear2.x = 200;
    bear3.x = 400;
    var stage = new createjs.Stage("sprite");
    stage.addChild(bear1, bear2, bear3);
    
    function draw() {
        stage.update();
    }
    

    干杯。

    DOM元素没有
    update
    方法?创建一个JSFIDLE来显示problem@DonRhummy请看我做了一些更改。createJS中存在更新方法。@1。您确定图像路径有效吗?(图标上有大写的“I”这与javascript页面的运行位置有关。2.
    addChild
    只拍摄一张图像。不,如果是这样,它会告诉他这是nulladdChild,它接受多个参数:非常感谢,伙计,另一个问题是画布显示了非常大的图标。我如何将它们缩小到适合画布的大小?@khan--你可以使用scaleX/scaleY缩放位图资源。
    var imgPath = 'Icons/baby_bear.png';
    var image = new Image();
    image.onload = draw;
    image.src = imgPath;
    
    var bear1 = new createjs.Bitmap(image);
    var bear2 = new createjs.Bitmap(image);
    var bear3 = new createjs.Bitmap(image);
    bear2.x = 200;
    bear3.x = 400;
    var stage = new createjs.Stage("sprite");
    stage.addChild(bear1, bear2, bear3);
    
    function draw() {
        stage.update();
    }