Fatal编程技术网
  • javascript/
  • Javascript 代码绘制随机贝塞尔线。。。未正确渲染

Javascript 代码绘制随机贝塞尔线。。。未正确渲染

javascript canvas random

Javascript 代码绘制随机贝塞尔线。。。未正确渲染,javascript,canvas,random,bezier,curve,Javascript,Canvas,Random,Bezier,Curve,我认为应该发生的是，在框中，在5秒内，每500毫秒连续绘制10条随机着色/形状的线，总共10条，然后重置。但我得到的只是一个黑色的帆布盒子 <html> <head> </head> <body> <canvas id="myCan" style="background: black" width=720 height=420> </canvas> <script> var canv = docume

我认为应该发生的是，在框中，在5秒内，每500毫秒连续绘制10条随机着色/形状的线，总共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>


var canv=document.getElementById（'myCan'）；
var ctx=canv.getContext（'2d'）；
var t=500；//时间迭代
函数draw（）{/--draw
ctx.beginPath（）；
c1x.canv.width*Math.random（）；//贝塞尔控件1注意：原始代码“高度”不是宽度…请在检查此代码时重试！我切换了此代码…但仍然无法工作
c1y.canv.height*Math.random（）；//贝塞尔控件
c2x.canv.width*Math.random（）；//bezier control 2注意：原始代码的“高度”不是“宽度”…因此请在检查此代码时重试！我切换了此代码…但仍然无法工作
c2y.canv.height*Math.random（）；//贝塞尔控件
x、 canv.width*Math.random（）；//随机点
y、 canv.height*Math.random（）；
x1.canv.width/2；//中点
y1.canv.height/2；
ctx.moveTo（x1，y1）；//起点
贝塞尔曲线（c1x，c1y，c2x，c2y，x，y）；//贝塞尔曲线
ctx.closePath（）；
ctx.lineWidth=Math.random（）*20；
ctx.strokeStyle='hsl（'+Math.random（）*360+'，50%，50%）；//贝塞尔光束的颜色
ctx.shadowColor='白色'；
ctx.shadowBlur=Math.random（）*50；
ctx.stroke（）；
ctx.strokeRect（c1x，c1y，1，1）；
ctx.strokeRect（c2x，c2y，2，2）；
}
draw（）；
设置间隔（绘图，t）；//内部定时器
setInterval（函数（）{ctx.clearRect（0,0，canv.width，canv.height）}，10*t）；
//10个形状，'10*t
//9种形状，9*t等。
仅此而已。
谢谢。

在试图弄清楚这些魔法师是从哪里来的之后，我想你想做的就是这个

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);

}
在试图弄清楚这些魔法师是从哪里来的之后，我想你想做的就是这个

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);

}
什么是c1x和c1y以及从何处获得x和y？我看不到这些对象定义在何处。请后退一步，从代码中删除“间隔”和“多个形状”。你能画出一个单一的形状吗？如果不是的话，至少现在你的代码对你来说更简单，让你去看和思考。优秀的“思维建模”理念！！！非常感谢。我在“c1x到y1”开始时少了几个“VAR”！什么是c1x和c1y以及从何处获得x和y？我看不到这些对象定义在何处。请后退一步，从代码中删除“间隔”和“多个形状”。你能画出一个单一的形状吗？如果不是的话，至少现在你的代码对你来说更简单，让你去看和思考。优秀的“思维建模”理念！！！非常感谢。我在“c1x到y1”开始时少了几个“VAR”！我甚至没有考虑过“let”的用法。哇！这打开了一些思考的潜能。非常感谢你！让和var都创建一个新变量。但let是块作用域，其中var是（函数）上下文作用域。你当然需要在某个地方用var声明它们，我甚至没有考虑过使用“let”。哇！这打开了一些思考的潜能。非常感谢你！让和var都创建一个新变量。但let是块作用域，其中var是（函数）上下文作用域。您当然需要在某个地方声明这些变量，以使其工作。