Rectangle in Kinetic js

<html>
<body>
<div id=”container”></div>
<script type=”text/javascript” src=”Kinetic.js”></script>
<script>
var stage=new Kinetic.Stage({
container:’container’,
width:500,
height:500
});
var layer=new Kinetic.Layer();
var jk=new Kinetic.Layer();
var colors=[‘red’, ‘orange’, ‘yellow’, ‘green’, ‘blue’, ‘purple’];
for(var n=0;n<=6;n++){
(function(){
var i=n;
var box=new Kinetic.Rect({
x:i*30+210,
y:i*18+40,
width:100,
height:50,
name:colors[i],
fill:colors[i],
stroke:’black’,
strokeWidth:5
});
layer.add(box);
})();
}
layer.on(‘mouseover’,function(){
document.body.style.cursor=’pointer’;
});
layer.on(‘mouseout’,function(){
document.body.style.cursor=’default’;
});

stage.add(layer);
</script>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s