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