堆棧內存溢出
  簡體   English   中英

JS：如何創建一個10x10的填充矩形網格？

[英]JS: How do I create a 10x10 grid of filled rectangles?

 原文  2015-11-16 21:46:33  3   6    javascript/ canvas

問題描述

我正在嘗試在10x10的網格中創建100個填充的矩形。 這些矩形中的每個矩形的大小均為20px * 20px，彼此相距20px。 我完全理解了其背后的邏輯以及大致如何將其放入代碼中，但是有一部分我似乎無法理解。 在繪制前10個后，如何使矩形顯示在下一行上。

我在這里用我當前的進度來擺弄： http : //jsfiddle.net/z3wsxa8j/

如您所見，它們成對角線。 我理解為什么，因為X和Y不斷增加+ 40px的坐標。 如果我刪除yvalue += 40; 顯然，它們都在同一行上。 我不知道在達到10個矩形后如何優雅地讓它們繼續前進。 我嘗試使用if/else語句，所以當有11個矩形時，將其my_context.fillRect(xvalue,40,20,20); ...如果是21個矩形
my_context.fillRect(xvalue,80,20,20); 等等。 但這將導致A）產生大量if語句，並且B）甚至無法正常工作（它們仍打印在同一行上）。

任何提示表示贊賞，謝謝！

6 個解決方案

解決方案1
 2 已采納  2015-11-16 21:49:57

每第10個平方，您需要做兩件事：

  • 增加“ y”值以向下移動到下一行，然后
  • 將“ x”值設置回0

另外，您需要確保只做100箱而不是101箱： 

for (var x = 0; x < 100; x++) {
    my_context.fillRect(xvalue, yvalue, 20, 20);
    xvalue += 40;
    if ((x+1) % 10 === 0) {
        yvalue += 40;
        xvalue = 0;
    }
}

當“ x”為9、19、29等時， (x+1) % 10將為0 。

解決方案2
 0  2015-11-16 21:50:55

嘗試使用嵌套的for循環： 

var canvas = document.getElementById("canvas");
var my_context = canvas.getContext('2d');
my_context.strokeStyle = "white"; // Draws the canvas border
my_context.rect(0, 0, 1000, 1000);
my_context.stroke();
my_context.fillStyle = "white";

var step = 40;
for (var x = 0; x <= 10; x++) {
    for(var y = 0; y <= 10; y++) {
        my_context.fillRect(x*step, y*step, 20, 20);
    }
}

此代碼逐列繪制矩形。 這是一個小提琴。

解決方案3
 0  2015-11-16 21:51:35

您可以使用單個if語句和一個變量來跟蹤連續繪制的盒子數量。 繪制10個框時，重置計數並增加y值。

更新的小提琴： 演示 

var canvas = document.getElementById("canvas");
var my_context = canvas.getContext('2d');
my_context.strokeStyle = "white"; // Draws the canvas border
my_context.rect(0, 0, 1000, 1000);
my_context.stroke();
my_context.fillStyle = "white";

var xvalue = 0;
var yvalue = 0;
var boxes = 1;
for (var x = 0; x <= 100; x++) {
    if(boxes>10){
        boxes = 1;
        xvalue = 0;
        yvalue += 40;
    }
    boxes++;
    my_context.fillRect(xvalue, yvalue, 20, 20);
    xvalue += 40;
}

解決方案4
 0  2015-11-16 21:52:06

基本上是從一個軸開始繪制，然后使用內循環對10個矩形進行校正，然后對另一根軸重復40px shiftign，將其重復10次JS Fiddle

注意：在您的代碼中，您有(var x = 0; x <= 10; x++)這將繪制11個矩形而不是10個矩形，因為您是從0開始並以10結尾，所以應該是(var x = 0; x < 10; x++)代替<= 

 var canvas = document.getElementById("canvas"); var my_context = canvas.getContext('2d'); my_context.strokeStyle = "white"; // Draws the canvas border my_context.rect(0, 0, 1000, 1000); my_context.stroke(); my_context.fillStyle = "white"; var xvalue = 0; var yvalue = 0; for (var y = 0; y < 10; y++) { for (var x = 0; x < 10; x++) { my_context.fillRect(xvalue, yvalue, 20, 20); xvalue += 40; } xvalue = 0; yvalue += 40; } 
 body { background-color: gray; margin: 0px; overflow: hidden; } 
 <body> <canvas id="canvas" width="1000" height="1000"></canvas> </body>

解決方案5
 0  2015-11-16 21:53:25

只需使用x和ay循環而不是一個大循環： 

for (var x = 0; x <= 10; x++) {
    for (var y = 0; y <= 10; y++) {
        my_context.fillRect(x*40, y*40, 20, 20);
    }
}

解決方案6
 0  2015-11-16 22:11:10

正如其他人所述，您可以在for循環內有一個for循環，這樣您可以先遞增每行，然后遞增每一列。

http://jsfiddle.net/z3wsxa8j/10/ 

var canvasSize = 1000;
var blockSize = 20;
var numBlocks = canvasSize/blockSize;

// Outer loop for each columns
for (var i = 0; i < numBlocks; i++) {
  xvalue = 0;
  yvalue = blockSize*i;

  // Inner loop for the rows
  for (var j = 0; j < numBlocks; j++) {
    my_context.fillRect(xvalue, yvalue, blockSize, blockSize);
    xvalue += blockSize;        
  }
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 創建一個10x10的單元格字段 使用easyl.js創建10x10圖像網格，圖像交叉隨機溶解 為什么我的程序創建10x9網格而不是10x10網格？ 如何制作一個由“＃”字符組成的10x10矩形？ 創建一個 10x10 字段的字段 需要有關HTML / JS方法的幫助，從此處開始構建10x10乘法表，此表應稍后在動態 如何在Javascript中創建一個模擬100行和10列網格的嵌套循環？ HTML / CSS：具有相等邊距的10x10 div框，但是由於某種原因，高度長於寬度 制作具有 10x10 單元格的表格，每個單元格的內部編號從 1 到 100 如何在 Vue.js 中創建一個簡單的 10 秒倒計時
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM