繁体   English   中英

为什么我的图像没有显示

[英]why aren't my images showing up

嗨,我正在尝试学习如何使用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文件,它将开始工作:(我将.js包含在te index html的body标签中

编辑::::::::::::::::::::::这是我当前的代码,除非我将画布添加到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();

另一件事-由于您正在使用图像路径,并且没有完全加载图像作为位图源,因此更新舞台时,可能图像尚未准备就绪。 您可以在图像上放置加载处理程序以更新舞台,也可以先预加载它们。

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);

请尝试以下方法:

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();
}

首先,您需要使用导航器的控制台来查看javascript的错误,然后再提出任何问题。

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

那是因为您加载了document.body.appendChild(democanvas); 在加载html之前,因此您的document.body为null。

这是这样的:

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()

我遇到了同样的问题,并通过使用预加载器解决了它。 您可以像这样使用PreloadJS预加载器:

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

    var manifest = [

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

    ];

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM