Question

我无法弄清楚如何创建一个for循环，它允许我从左到右在画布上制作100条贝塞尔曲线。我有代码来制作我想要的曲线形状，我只是无法弄清楚如何在页面上复制它。请帮忙！这是我想要做的，但不必重复代码100次。

var canvas       
var canvas = document.getElementById("c");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx;
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(10,10,40,10,80,10);
ctx.stroke();
ctx.shadowColor;
ctx.fillStyle("#FF0000");

var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.moveTo(50,0);
ctx.bezierCurveTo(175,330,-15,600,0,600);
ctx.bezierCurveTo(-100,700,50,800,0,850);
ctx.moveTo(62.5,0);
ctx.bezierCurveTo(187.5,330,-2.5,600,12.5,600);
ctx.bezierCurveTo(-87.5,700,62.5,800,12.5,850);

ctx.moveTo(75,0);
ctx.bezierCurveTo(200,330,10,600,25,600);
ctx.bezierCurveTo(-75,700,75,800,25,850);
ctx.lineWidth = 5;
ctx.strokeStyle = '#000000';
ctx.stroke();

Answer 1

使用循环。并检查模式。

var c = document.getElementById("c");
var ctx = c.getContext("2d");
for(var i = 0; i<100; i++){
 var j = 12.5*i;
 ctx.moveTo(50+j, 0);
 ctx.bezierCurveTo(175+j, 330, -15+j, 600, j, 600);
 ctx.bezierCurveTo(-100+j, 700, 50+j, 800, j, 850);
}

ctx.lineWidth = 5;
ctx.strokeStyle = '#000000';
ctx.stroke();

<canvas id="c" width="1200" height="1000" style="border:1 px solid #c3c3c3; ">

Answer 2

如果你想在画布上重复相同的曲线100次，你需要调整所有点的位置，否则你会创建看起来完全相同的多条曲线（所以它看起来只有其中一条）

您的代码中也存在一些语法错误，例如： fillStyle是属性，而不是函数。

为绘图创建一个函数，它将从绘制曲线的位置获取[x，y]坐标：

function drawCurve(ctx, x, y) {
  ctx.beginPath();
  ctx.moveTo(x + 20, y + 20);
  ctx.bezierCurveTo(x + 10, y + 10, x + 40, y + 10, x + 80, y + 10);

  ctx.fillStyle = "#FF0000";
  ctx.lineWidth = 5;
  ctx.strokeStyle = '#000000';
  ctx.stroke();
}

var canvas = document.getElementById("c");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");

drawCurve(ctx, 50, 30);
drawCurve(ctx, 150, 130);
drawCurve(ctx, 0, 90);

<canvas id="c" width ="1200" height="1000" style="border: 1px solid #c3c3c3;"></canvas>

Answer 3

您应该使用for循环。

您可能还希望使用在循环内递增或递减的变量替换函数调用中的一些硬编码常量。这应该使输出更具动态性。

为贝塞尔曲线创建for循环

3 个答案: