為什么我的圖像沒有顯示
[英]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();
4 個解決方案
解決方案1
1 2013-07-18 13:58:45
另一件事-由於您正在使用圖像路徑，並且沒有完全加載圖像作為位圖源，因此更新舞台時，可能圖像尚未准備就緒。 您可以在圖像上放置加載處理程序以更新舞台，也可以先預加載它們。
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);
解決方案2
0 2013-07-17 16:35:38
請嘗試以下方法：
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();
}
解決方案3
0 2013-07-17 16:54:12
首先，您需要使用導航器的控制台來查看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()
解決方案4
0 2013-10-16 08:12:33
我遇到了同樣的問題，並通過使用預加載器解決了它。 您可以像這樣使用PreloadJS預加載器：
var preloader = new createjs.LoadQueue(true);
preloader.addEventListener("complete",this.handleComplete.bind(this));
var manifest = [
{src:"./images/yourIMAGE.PNG"},
//another image
];
為什么我的劊子手 JavaScript 游戲中沒有顯示我的所有信件？
[英]Why aren't all my letters showing up in my hangman javascript game?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.