vendredi 28 février 2020

Code drawing random Bezier lines ... Not properly rendering

What I believe ought to happen is ten randomly colored/ shaped lines are successive-ly drawn 1 every 500ms over 5 seconds in the box for 10 total then reset. But all I am getting is a black canvas box.

<html>
<head>
</head>
<body>

<canvas id="myCan" style="background: black" width=720 height=420>
 </canvas>

<script>

  var canv = document.getElementById('myCan');
  var ctx = canv.getContext('2d');
  var t = 500; // time iteration

function draw() { // - - draw
  ctx.beginPath();

  c1x.canv.width*Math.random(); // bezier control 1 NOTES: original code 'height' not width ... so try please as you check over this code! I switched this ... and still not working
  c1y.canv.height*Math.random(); // bezier control
  c2x.canv.width*Math.random(); // bezier control 2 NOTES: original code has 'height' not width ... so try has please as you check over this code! I switched this ... and still not working
  c2y.canv.height*Math.random(); // bezier control
  x.canv.width*Math.random(); // random point
  y.canv.height*Math.random();
  x1.canv.width/2; // mid-point
  y1.canv.height/2;

  ctx.moveTo(x1, y1); // starting point
  ctx.bezierCurveTo(c1x, c1y, c2x, c2y, x, y); // bezier curve
  ctx.closePath();

  ctx.lineWidth = Math.random()*20;
  ctx.strokeStyle = 'hsl(' + Math.random()*360 + ', 50%, 50%)'; // color of bezier beam
  ctx.shadowColor = 'white';
  ctx.shadowBlur = Math.random()*50;
  ctx.stroke();
  ctx.strokeRect(c1x, c1y, 1, 1);
  ctx.strokeRect(c2x, c2y, 2, 2);

}

draw();
setInterval(draw, t); // internal timer

setInterval(function() {ctx.clearRect(0, 0, canv.width, canv.height)}, 10*t);
// 10 shapes, '10*t
// 9 shapes, 9*t etc.

</script>

</body>
</html>

That is all. Thank you.




Aucun commentaire:

Enregistrer un commentaire