如何為具有多個引數的畫布函式創建回圈？

<canvas id="chart" width="700" height="550"></canvas>

<script>
  const canvas = document.getElementById('chart');
  const context = canvas.getContext('2d');

  /* Draw a line from (fromX, fromY) to (toX, toY) */
  function drawLine(fromX, fromY, toX, toY) {
    context.beginPath();
    context.moveTo(toX, toY);
    context.lineTo(fromX, fromY);
    context.stroke();
  }

  /* Draw a text (string) on (x, y) */
  function drawText(text, x, y) {
    context.fillStyle = 'black';
    context.fillText(text, x, y);
  }

  /* Draw a text and with a line to its right */
  function drawLineWithText(text, fromX, fromY, toX, toY) {
    drawText(text, fromX - 50, fromY   3);
    drawLine(fromX, fromY, toX, toY);
  }

  for (var fromY = 50; fromY < 500; fromY  = 50, toY = 50 toY < 500; toY  = 50, fromX = 70, toX =700) {
    drawLineWithText(text, fromX, fromY, toX, toY);
  }
</script>

uj5u.com熱心網友回復：

在這種情況下，我沒有看到任何需要在 for 回圈中使用多個變數的特殊情況……
如果我們分解回圈中的內容，我們最終會得到：

/*
    fromY = 50; fromY < 500; fromY  = 50, 
      toY = 50;   toY < 500;   toY  = 50, 

    fromX = 70, 
      toX = 700
*/

在fromY與toY具有相同的圖案，并fromX與toX剛剛硬編碼值...

所以為了簡化你的代碼，這就是我要做的：

const canvas = document.getElementById('chart');
const context = canvas.getContext('2d');

function drawLine(fromX, fromY, toX, toY) {
  context.beginPath();
  context.moveTo(toX, toY);
  context.lineTo(fromX, fromY);
  context.stroke();
}

for (var i = 50; i < 500; i  = 50) {
  drawLine(70, i, 700, i);
}

<canvas id="chart" width="700" height="550"></canvas>

您可以在一個回圈中使用多個變數，這是絕對可能的，但是您的示例并不是它的最佳用途，這里是多個變數的一個很好的例子。

const canvas = document.getElementById('chart');
const context = canvas.getContext('2d');

function drawLine(fromX, fromY, toX, toY) {
  context.beginPath();
  context.moveTo(toX, toY);
  context.lineTo(fromX, fromY);
  context.stroke();
}

var x, y
for (x=50, y=10;  x<200, y<100;  x*=1.3, y =9) {
  drawLine(10, y/3, x, y);
}

<canvas id="chart" width="500" height="100"></canvas>

這里有一些關于 for 回圈解剖的好讀物：https :
//gomakethings.com/the-anatomy-of-a-for-loop-in-vanilla-js-and-when-you-would-want-to-使用它而不是陣列.foreach/

...它分為三個部分，每個部分用分號 (;) 分隔：

• 在第一個分號之前，您可以宣告或分配變數。
• 在第一個和第二個分號之間，您定義了一個條件以在每個回圈后檢查。只要這個條件為真，回圈就會一直運行。一旦條件為假，回圈就停止。
• 在第二個分號之后，您可以指定要在每個回圈后運行的陳述句。

uj5u.com熱心網友回復：

嘗試將您的自定義引數收集到可以首先迭代的單個陣列中。可能是這樣的：

// establish your starts, ends, and steps
const text = 'Some text';

const fromXStart = 70;
const fromXEnd = 700;
const fromXStep = 50;

const fromYStart = 50;
const fromYEnd = 500;
const fromYStep = 50;

const toXStart = 700;
const toXEnd = 1000;
const toXStep = 50;

const toYStart = 50;
const toYEnd = 500;
const toYStep = 50;

// create an object to keep track of where we are at each iteration of the loop
const currentArgs = {
  fromX: fromXStart,
  fromY: fromYStart,
  toX: toXStart,
  toY: toYStart
}

// create a single array of args to loop over with our intial values
const args = [
  [text, currentArgs.fromX, currentArgs.fromY, currentArgs.toX, currentArgs.toY]
]

// create a check function to see if we're done looping (if all ends have been met)
const isDone = () => {
  const fromXIsDone = currentArgs.fromX >= fromXEnd;
  const fromYIsDone = currentArgs.fromY >= fromYEnd;
  const toXIsDone = currentArgs.toX >= toXEnd;
  const toYIsDone = currentArgs.toY >= toYEnd;
  return fromXIsDone && fromYIsDone && toXIsDone && toYIsDone;
}

// loop until done
while (!isDone()) {
  // use Math.min to ensure we don't go past the max
  currentArgs.fromX = Math.min(fromXEnd, currentArgs.fromX   fromXStep);
  currentArgs.fromY = Math.min(fromYEnd, currentArgs.fromY   fromYStep);
  currentArgs.toX = Math.min(toXEnd, currentArgs.toX   toXStep);
  currentArgs.toY = Math.min(toYEnd, currentArgs.toY   toYStep);
  args.push([
    text, currentArgs.fromX, currentArgs.fromY, currentArgs.toX, currentArgs.toY
  ])
}

// now loop over our args array and use the spread syntax (...) to spread the args as args
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
for (let i = 0; i < args.length; i  ) {
  drawLineWithText(...args[i]);
}

標籤：javascript html 循环 for循环 帆布

上一篇：如何避免此問題中的嵌套for回圈

下一篇：如何使用vanillaJavascript將檔案內容放入陣列中？