画布中的随机对象答案

【问题标题】：Random Objects in Canvas画布中的随机对象
【发布时间】：2015-03-23 15:29:37
【问题描述】：

我创建了一个画布，我想在每五秒内添加随机对象（正方形、圆形、矩形..）？

  <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>

【问题讨论】：

你需要一个定时器，比如 setInterval(function () {someFunctionYouWantToCallEverySecond()}, 1000);
添加随机位置？

标签： javascript html canvas fabricjs

【解决方案1】：

看看我的小提琴示例，我认为这就是你所需要的。

http://jsfiddle.net/tornado1979/w1bg4bdj/

代码是这样的：

 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);

【讨论】：