Kinetic JS (Cricle And Triangle)

<html>
<body>
<div id=”con”></div>
<script type=”text/javascript” src=”Kinetic.js”></script>
<script>
var stage=new Kinetic.Stage({
container:’con’,
width:278,
height:200
});
var layer=new Kinetic.Layer();
var triangle=new Kinetic.RegularPolygon({
x:190,
y:140,
sides:3,
radius:80,
fill:’red’,
stroke:’black’,
strokeWidth:4
});
triangle.on(‘click’,function(){
var fill=this.getFill()==’yellow’ ? ‘pink’ : ‘yellow’;
this.setFill(fill);
layer.draw();
});
var circle=new Kinetic.Circle({
x:100,
y:stage.getHeight()/2,
radius:70,
fill:’red’,
stroke:’black’,
strokeWidth:4
});
layer.add(circle);
circle.on(‘click’,function(){
var fill=this.getFill()==’red’ ? ‘green’:’red’;
this.setFill(fill);
layer.draw();
});
layer.add(triangle);
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