為貝塞爾曲線創建for循環

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循環。

您可能還希望用循環內遞增或遞減的變量替換函數調用中的一些硬編碼常量。 這應該使輸出更加動態。