使用Javascript和Canvas复制图纸

Question

我想根据用户所需的数量在多行中绘制一个“花”。 我已经有创建椭圆的代码（由老师给定），然后是一朵花，我想得到以下结果：

我想要的结果：

在此示例中，用户选择连续绘制14朵花。

椭圆代码：

imul   -0x8(%rsp, %rbx, 4), %eax
cmp    %eax, -0x4(%rsp, %rbx, 4)

Answer 1

您可以调用while循环2来绘制花朵数量。我使用您的代码创建了示例代码段，该代码段将随机创建花朵。

请参见下面的代码段

/**
Drawing an ellipse in the Canvas
 * @param {CanvasRenderingContext2D} ctx 
 * @param {number} cx abscissa
 * @param {number} cy ordinate
 * @param {number} rx radius
 * @param {number} ry vertical radius
 * @param {number} angle the angle on degrees of the ellipse from the horizontale
 * @param {string} style Colour of the shape
 */
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext('2d');
 
function ellipse(ctx, cx, cy, rx, ry, angle, style) {
    ctx.save(); // save the initial context
    ctx.beginPath();
    ctx.translate(cx, cy);
    ctx.rotate(angle * Math.PI / 180);
    ctx.scale(rx, ry);
    ctx.arc(0, 0, 1, 0, 2 * Math.PI, false);
    ctx.restore(); // restore the original state of the context
    ctx.save();
    if (style) {
        ctx.strokeStyle = style;
    }
    ctx.stroke();
    ctx.restore();
}

function Flower(x,y) {
    let i = 0;
    while (i < 6) {      
        ellipse(ctx, 20 * x, 20 * y, 18, 2, 30 * i, 'red');
        i++;
    }
  }
  
  function drawFlower(xnum, ynum){
    let x = 1;
    let y = 1;
    while(y < xnum * 2){
      while (x < ynum * 2){
          Flower(x, y);
          x+=2;
      }
      x = 1;
      y+=2;
    }
  }
    
  document.getElementById("drawFlowers").addEventListener("click", function (){
  	ctx.clearRect(0,0,600,600);
    ctx.fillStyle = "#E0FFFF";
ctx.fillRect(0, 0, 600,600);
  drawFlower(Math.random() * (14 - 1) + 1, Math.random() * (14 - 1) + 1);
  })
  

<div id="input">

  <button id="drawFlowers">
    Draw Flowers
  </button>
</div>
<div>
    <canvas id="canvas" width="600" height="600"></canvas>
  </div>

您也可以here对其进行测试