1

こんにちは、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 index 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();
4

4 に答える 4

0

以下を試してください：

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();
}
于 2013-07-17T16:35:38.197 に答える
0

まず、ナビゲーターのコンソールを使用して、質問の前に JavaScript のエラーを確認する必要があります。

次のエラーが表示されます: Uncaught TypeError: Cannot call method 'appendChild' of null

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()
于 2013-07-17T16:54:12.920 に答える