Двойной рисунок с Javascript и Canvas - PullRequest
Новая
       22

Двойной рисунок с Javascript и Canvas

0 голосов
/ 25 октября 2018

Я хотел бы нарисовать «Цветок» в несколько строк в соответствии с номером, который желает пользователь.У меня уже есть код для создания эллипса (предоставленный учителем), а затем цветка, и я хотел бы получить следующий результат:

Результат, который я хотел бы получить:

enter image description here

В этом примере пользователь решил нарисовать 14 цветов подряд.

Код эллипса: 

/**
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
 */
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() {
    let i = 0;

    while (i < 10) {
        ellipse(ctx, 300, 300, 200, 40, 30 * i, 'red');
        i++;
    }
}

1 Ответ

0 голосов
/ 26 октября 2018

Вы можете вызвать 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>

Вы также можете проверить это здесь

...