使用KineticJS时，画布图像不持久
Canvas Images does not Persist while using KineticJS?
我正在使用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';
只要运行上面的代码，你就会明白问题所在。有一个黑色的闪烁，我想把它放在草地上作为道路。
Fixed…
你的backgroundImage在drawGrass()中被backgroundImage.src完全加载之前就被使用了。
我把所有的场景设置都移到了背景图像中。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>
相关文章：
- 背景图像顶部的滚动图像不移动
- javascript如果图像不存在don't加载它
- ajax加载(）后，包含图表的图像不会重新绘制
- 如果图像标记是用javascript编写的，并且需要用户输入，那么图像不会随页面加载吗
- 编辑图像字段javascript验证空白图像不插入
- 当我在操作属性中写入页面名称时，文件图像不会上传
- 本地存储功能中的图像不起作用
- css:拖动图像不'不适用于Firefox
- 使用javascript中的if和else语句来显示图像(如果图像不存在，则显示其他图像）
- 简单的 Java 脚本背景图像不起作用
- html画布绘制图像不起作用
- jquery选择图像不起作用
- JSXGraph 中有什么方法可以使图像不透明
- 在html画布代码中插入图像不起作用
- 设置来自 javascript 的背景图像不起作用
- 图像不会显示在钛构建安卓应用程序中
- 图像不会显示
- HTML5视频回退/备份图像不合适..
- JavaScript更改图像源不持久
- 使用KineticJS时，画布图像不持久
