Javascript 画布中的随机对象_Javascript_Html_Canvas_Fabricjs

Javascript 画布中的随机对象

javascript html canvas

Javascript 画布中的随机对象,javascript,html,canvas,fabricjs,Javascript,Html,Canvas,Fabricjs,我创建了一个画布，我想每五秒钟添加一个ramdomly对象（正方形、圆形、矩形..） <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

我创建了一个画布，我想每五秒钟添加一个ramdomly对象（正方形、圆形、矩形..）

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


看看我的小提琴例子，我想这就是你需要的

代码如下：
 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);

您需要一个计时器，类似于setInterval（function（）{someFunctionYouWantToCallEverySecond（）}，1000）；加上随机位置？