我相信应该发生的情况是，在5秒钟内每500ms连续绘制10条随机着色/形状的线，在框中每5秒钟绘制一次，总共10次，然后重置。但是我得到的只是一个黑色的帆布盒子。
<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>
仅此而已。谢谢。
在尝试弄清所有这些魔术变量来自何处之后，我认为您的意思是这样做。
function draw() { // - - draw
ctx.beginPath();
let 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
let c1y = canv.height*Math.random(); // bezier control
let 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
let c2y = canv.height*Math.random(); // bezier control
let x = canv.width*Math.random(); // random point
let y = canv.height*Math.random();
let x1 = canv.width/2; // mid-point
let 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);
}