如何使用循环在画布的随机位置多次绘制它？答案

【问题标题】：how can use a loop to draw it multiple times in random places in my canvas?如何使用循环在画布的随机位置多次绘制它？
【发布时间】：2015-07-21 02:36:57
【问题描述】：

我在画布上画了一片叶子，但现在我想在画布上和随机位置画多次。我主要使用贝塞尔曲线来绘制我的叶子，我不知道如何使用循环在随机位置创建更多的叶子，因为坐标。

我的代码：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="800" height="800" style="border:1px solid #c3c3c3;">

</canvas>

<script>
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");

       context.lineWidth = 5;


      context.beginPath();
      context.moveTo(100, 150);

      context.strokeStyle="#009900";
      context.bezierCurveTo(170, 110, 400, 10, 500, 150);
      context.stroke();



      context.moveTo(100, 150);
      context.strokeStyle="#009900";
      context.bezierCurveTo(170, 130, 430, 310, 500, 150);
      context.stroke();
      context.fillStyle = '#99FF66';
      context.fill();


      context.strokeStyle="#009900";
      context.moveTo(250, 150);
      context.bezierCurveTo(400, 100, 400, 180, 500, 150);
      context.stroke();
       context.closePath();


      context.beginPath();
      context.strokeStyle="#996633";
      context.moveTo(500, 150);
      context.lineTo(580,150);
      context.stroke();
      context.closePath();





</script>

</body>
</html>

【问题讨论】：

随机生成一个 X 和 Y 值作为起点并将其添加到所有初始值中。

标签： javascript html loops canvas html5-canvas

【解决方案1】：

我能想到的最简单的解决方案是在绘制叶子之前使用context.translate 函数移动到要绘制叶子的位置：

        //Generate x y coords, offset by the x,y of the leaf:
        var x = (Math.random()*500) - 250;
        var y = (Math.random()*500) - 150;
        //Translate
        context.translate(x, y);
        //Draw leaf
        //Translate back
        context.translate(-x,-y)

在随机位置绘制两片叶子的代码：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="800" height="800" style="border:1px solid #c3c3c3;">

</canvas>

<script>
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");

      context.lineWidth = 5;
      for(var i = 0; i < 2; i++) {

            //Generate x y coords, offset by the top x,y of the leaf:
            var x = (Math.random()*500) - 250;
            var y = (Math.random()*500) - 150;
            //Translate
            context.translate(x, y);

            //Draw
            context.beginPath();
            context.moveTo(100, 150);

            context.strokeStyle="#009900";
            context.bezierCurveTo(170, 110, 400, 10, 500, 150);
            context.stroke();



            context.moveTo(100, 150);
            context.strokeStyle="#009900";
            context.bezierCurveTo(170, 130, 430, 310, 500, 150);
            context.stroke();
            context.fillStyle = '#99FF66';
            context.fill();


            context.strokeStyle="#009900";
            context.moveTo(250, 150);
            context.bezierCurveTo(400, 100, 400, 180, 500, 150);
            context.stroke();
            context.closePath();


            context.beginPath();
            context.strokeStyle="#996633";
            context.moveTo(500, 150);
            context.lineTo(580,150);
            context.stroke();
            context.closePath();

            //Translate Back
            context.translate(-x, -y);
      }


</script>

</body>

【讨论】：

你可能想稍微改变偏移量（它们有点靠近）
有没有办法创建两个以上？
通过增加for(var i = 0; i < 2; i++) 中的“2”来创建尽可能多的内容
@OliverBarnwell，在您执行context.translate(x,y) 并完成绘图后，您需要在每个循环结束之前执行context.translate(-x,-y) 来重置画布。否则，您的绘图将很快从画布上翻译出来。 ;-)
谢谢。将进行必要的修改:)

【解决方案2】：

由于您想重用某些代码 -> 隔离参数并从中构建函数。
那么任何模式都将很容易构建。

http://jsbin.com/mimisuziyi/1/

function drawLeaf(x,y, size, rotation) {
       context.lineWidth = 5;

      context.save();
      context.translate(x,y);
      context.scale(size/400, size/400);
      context.rotate(rotation);
      context.beginPath();

      context.moveTo(0, 0);

      context.strokeStyle="#009900";
      context.bezierCurveTo(70, -40, 300, 10-150, 400, 0);
      context.stroke();

      context.moveTo(0, 0);
      context.strokeStyle="#009900";
      context.bezierCurveTo(70, -20, 330, 160, 400, 0);
      context.stroke();
      context.fillStyle = '#99FF66';
      context.fill();


      context.strokeStyle="#009900";
      context.moveTo(150, 0);
      context.bezierCurveTo(300, -50, 300, 30, 400, 0);
      context.stroke();
       context.closePath();


      context.beginPath();
      context.strokeStyle="#996633";
      context.moveTo(400, 0);
      context.lineTo(480,0);
      context.closePath();
      context.stroke();

      context.restore();
}

用于：

 drawLeaf(100, 150, 400, 0);

或：

var leafCount = 5;
for (var i=0; i<leafCount; i++) {
  drawLeaf(150, 300, 100, 2*i*Math.PI/leafCount)
}

【讨论】：