使用KineticJS时Canvas Images无法持久吗？

Question

我正在使用Kinetic JS制作一个小游戏，赛车在赛道上行驶。 我使用了草的图片，但尝试自己搭建道路。 我的问题是，每当我运行Project时，都会出现道路闪烁的黑色补丁，然后消失并出现草，而我需要在草上构建道路。 请帮忙。 我分享了小提琴。

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在backgroundImage.src完全加载之前已在drawGrass（）中使用。

我将所有场景设置都移到了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>