javascript - Random Objects in Canvas -
i created canvas , want add ramdomly objects(square, circle, rectangle..) in every 5 second?
<body> <canvas id="c" width=400" height="400"></canvas> <script type="text/javascript"> var canvas = new fabric.canvas('c'); var rect = new fabric.rect({ left: 50, top: 50, fill: 'green', width: 40, height: 80 }); var circle = new fabric.circle({ radius: 20, fill: 'red', left: 100, top: 100 }); canvas.add(rect); canvas.add(circle); </script>
take @ fiddle example , think need.
http://jsfiddle.net/tornado1979/w1bg4bdj/
the code this:
var canvas = new fabric.canvas('c'); var myobjects = ['circle','square','rectangle','arc']; var posx; var posy; setinterval(function () { var pointer = myobjects.length * math.random(); posx = canvas.width * math.random(); posy = canvas.height * math.random(); pointer = math.round(pointer); switch (pointer){ case 0: var circle = new fabric.circle({ radius: 20, fill: 'red', left: posx, top: posy }); canvas.add(circle); break; case 1: var obj = new fabric.rect({ left: posx, top: posy, fill: 'green', width: 40, height: 80 }); canvas.add(obj); break; case 2: var square = new fabric.rect({ left: posx, top: posy, fill: 'yellow', width: 50, height: 50 }); canvas.add(square); break; case 3: var arc = new fabric.circle({ radius: 45, originx:'center',originy:'center', angle: 0,startangle: 180, endangle: math.pi, fill: 'blue', left: posx, top: posy }); canvas.add(arc); break; } }, 1000);
Comments
Post a Comment