CanvasDemo

Generarea unei corole de minuni intr-un element <canvas>

HTML

<!-- click/tap pentru a genera corola -->
<canvas id="canvas" width="680" height="480"></canvas>

CSS

canvas {
  border: 1px solid gray;
  background: white;
}

JavaScript

function deseneazaDiscuri() {
  var context = document.getElementById('canvas').getContext('2d');

  // stabilirea parametrilor corpului de literă
  context.font = "3em serif";
  context.strokeText("Buraga", 7, 33);
  context.translate(74, 74); // ...plus translare

  for (let i = 1; i < 5; i++) { // generarea 'inelelor' de discuri
    context.save(); // salvarea contextului de redare
    // stabilirea via CSS a culorii de umplere a discului curent
    // + ajustarea aleatorie a transparentei (alpha)
    context.fillStyle = 'rgba(0, ' + (74 * i) + ',' + 
      (255 - 74 * i) + ',' + Math.random() + ')';
    for (let j = 0; j < i * 6; j++) { // desenarea discurilor
      context.rotate(Math.PI * 2 / (i * 6));
      context.beginPath();
      context.arc(0, i * 50, 5, 0, Math.PI * 2, true);
      context.fill();
    }
    context.restore(); // restaurarea contextului de redare
  }
}
// tratarea evenimentului click
document.body.addEventListener ("click", deseneazaDiscuri);