使用KineticJS時畫布圖像不會持續？

Question

我正在使用Kinetic JS來構建一個小型遊戲，其中汽車在賽道上運行。我已經使用了草圖，但是嘗試着自己修路。我的問題是，無論何時我運行項目時，道路閃爍的黑色補丁消失，草地就會出現，而我需要在草地上建造道路。請幫忙。我已分享小提琴。

http://jsfiddle.net/shivkumarganesh/aKh7V/embedded/result/

我剛纔也提到下面的代碼如下： -

/* 
Declaration of Road,Since the Road will be in 
both the directions I would be making an algorithm 
to get the road on the canvas and 
the the car onto it. 
*/ 
function Car(){} 

Car.prototype={ 
    x:0, 
    y:0, 
    position:0, 
    driver:0, 
    booster:true, 
    positionNext:0, 
    getPosition : function(){return this.position;}, 
    setPosition : function(position){this.position=position;}, 
    getDriver : function(){return this.driver;}, 
    setDriver : function(driver){this.driver}, 
    getBooster : function(){return this.booster;}, 
    setBooster : function(booster){this.booster=booster;}, 
    getPositionNext : function(){return this.positionNext;}, 
    setPositionNext : function(positionNext){this.positionNext=positionNext;}, 
    drive : function(newPosition){ 
     /*Code to steer the car to the new box. Either Animate or keep Dynamic*/} 
}; 

/*Making the Booster Class with Appropriate Getters and Setters*/ 
function Booster(){} 
Booster.prototype={ 
    position:0, 
    x:0, 
    y:0, 
    getX : function(){return this.x;}, 
    setX : function(x){this.x=x;}, 
    getY : function(){return this.y;}, 
    setY : function(y){this.y=y;}, 
    getPosition : function(){return this.position;}, 
    setPosition : function(position){this.position=position;} 
}; 

/*Road Block Class*/ 
function Road(){} 
Road.prototype={ 
    x:0, 
    y:0, 
    bomb:false, 
    booster:false, 
    position:0, 
    getX : function(){return this.x;}, 
    setX : function(x){this.x=x;}, 
    getBomb : function(){return this.bomb;}, 
    setBomb : function(bomb){this.bomb=bomb;}, 
    getBooster : function(){return this.booster;}, 
    setBooster : function(booster){this.booster=booster;}, 
    getPosition : function(){return this.position;}, 
    drawRoadPatch : function(roadLayer,stage){ 
     var rect = new Kinetic.Rect({ 
      x:0, 
      y:0, 
      width:100, 
      height:100, 
      fill:'black' 
     }); 
     roadLayer.add(rect); 
     stage.add(roadLayer); 
    } 
}; 

/*Grass For Background*/ 
function Grass(){} 
Grass.prototype={ 
    grassImage:'', 
    grassX:0, 
    grassY:0, 
    grassWidth:1000, 
    grassHeight:500, 
    getGrassX : function(){return this.grassX;}, 
    setGrassX : function(x){this.grassX=x;}, 
    getGrassY : function(){return this.grassY}, 
    setGrassY : function(y){this.grassY=y}, 
    getWidth : function(){return this.grassWidth;}, 
    setWidth : function(width){this.grassWidth=width;}, 
    getHeight : function(){return this.grassHeight;}, 
    setHeight : function(height){this.grassHeight=height;}, 

    /*Grass Utility Functions*/ 
    drawGrass : function(background,stage,image){ 
     image.onload=function(){ 
     var grass = new Kinetic.Image({ 
      x:this.grassX, 
      y:this.grassY, 
      image:image, 
      width:this.grassWidth, 
      height:this.grassHeight 
      }); 
     background.add(grass); 
     stage.add(background); 
     } 
    }, 
    changeBackgroud : function(background,stage,image){ 
     //This can be used to change the backgroud of page 
    } 

}; 





/*Declaring the Stage*/ 
var stage = new Kinetic.Stage({ 
    width:1000, 
    height:500, 
    container:'container' 
    }); 

/*Defining the assets (Images)*/ 
var backgroundImage = new Image(); 
var roadImage = new Image(); 
/*Defining the Layer (Layers)*/ 
var background = new Kinetic.Layer(); 
var roadLayer = new Kinetic.Layer(); 

var backgrass = new Grass(); 
var road = new Road(); 
/*Drawing Functions*/ 
backgrass.drawGrass(background,stage,backgroundImage); 
road.drawRoadPatch(roadLayer,stage); 



/*Image for Backgroud*/ 
backgroundImage.src='https://c9.io/shivkumarganesh/kiectcars/workspace/images/grass.jpg'; 

只要運行上面的代碼，你會明白的問題。有一個黑色的閃爍，我是在草地上的道路。

Answer 1

固定...

你將backgroundImage在drawGrass（）之前它完全由backgroundImage.src加載使用。

我將所有的場景設置都移動到了backgroundImage.onload回調函數中，並且全部都是固定的。

這裏被重新設計代碼和一個小提琴：http://jsfiddle.net/m1erickson/GyrXr/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="kinetic-v4.3.3.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
</style> 

<script> 
    $(function(){ 

/*Road Block Class*/ 
function Road(){} 
Road.prototype={ 
    x:0, 
    y:0, 
    bomb:false, 
    booster:false, 
    position:0, 
    getX : function(){return this.x;}, 
    setX : function(x){this.x=x;}, 
    getBomb : function(){return this.bomb;}, 
    setBomb : function(bomb){this.bomb=bomb;}, 
    getBooster : function(){return this.booster;}, 
    setBooster : function(booster){this.booster=booster;}, 
    getPosition : function(){return this.position;}, 
    drawRoadPatch : function(roadLayer,stage){ 
     var rect = new Kinetic.Rect({ 
      x:0, 
      y:0, 
      width:100, 
      height:100, 
      fill:'black' 
     }); 
     roadLayer.add(rect); 
     stage.add(roadLayer); 
    } 
}; 

/*Grass For Background*/ 
function Grass(){} 
Grass.prototype={ 
    grassImage:'', 
    grassX:0, 
    grassY:0, 
    grassWidth:1000, 
    grassHeight:500, 
    getGrassX : function(){return this.grassX;}, 
    setGrassX : function(x){this.grassX=x;}, 
    getGrassY : function(){return this.grassY}, 
    setGrassY : function(y){this.grassY=y}, 
    getWidth : function(){return this.grassWidth;}, 
    setWidth : function(width){this.grassWidth=width;}, 
    getHeight : function(){return this.grassHeight;}, 
    setHeight : function(height){this.grassHeight=height;}, 

    /*Grass Utility Functions*/ 
    drawGrass : function(background,stage,image){ 
     var grass = new Kinetic.Image({ 
      x:this.grassX, 
      y:this.grassY, 
      image:image, 
      width:this.grassWidth, 
      height:this.grassHeight 
      }); 
     background.add(grass); 
     stage.add(background); 
    }, 
    changeBackgroud : function(background,stage,image){ 
     //This can be used to change the backgroud of page 
    } 

}; 

/*Declaring the Stage*/ 
var stage = new Kinetic.Stage({ 
    width:1000, 
    height:500, 
    container:'container' 
    }); 

/*Defining the assets (Images)*/ 
// after waiting for the backgroundImage to load...! 
var backgroundImage = new Image(); 
backgroundImage.onload=function(){ 
    var roadImage = new Image(); 
    /*Defining the Layer (Layers)*/ 
    var background = new Kinetic.Layer(); 
    var roadLayer = new Kinetic.Layer(); 

    var backgrass = new Grass(); 
    var road = new Road(); 
    /*Drawing Functions*/ 
    backgrass.drawGrass(background,stage,backgroundImage); 
    road.drawRoadPatch(roadLayer,stage); 
} 
backgroundImage.src='http://c9.io/shivkumarganesh/kiectcars/workspace/images/grass.jpg'; 

    }); // end $(function(){}); 
</script> 

</head> 

<body> 
<div id="container"></div> 
</body> 
</html>