[英]How do you make a loop for canvas function which has several arguments?
<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>
**強文本**我實際上不知道如何為此做一個 for 語句,我嘗試玩弄,但只有在我手動完成時才設法使其工作,編寫自己的參數示例;
drawLineWithText(1000, 20, 30, 100, 30)
您可以將 for 循環簡化為
for(let i = 50; i < 500; i++) {
drawLineWithText(text, fromX, i, toX, i);
}
由於 fromY 和 toY 遵循相同的模式,並且 fromX 和 toX 是常量,所以這應該有效。
嘗試將您的自定義參數收集到可以首先迭代的單個數組中。 可能是這樣的:
// 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]); }
在這種情況下,我沒有看到任何特殊的東西需要在 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.