Question

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

我的代码：

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

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

Answer 2

因为您想重新使用某些代码 - ＆gt;隔离参数并从中构建一个函数那么任何模式都很容易构建。

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

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

2 个答案: