jQuery Canvas繪制不一致的形狀

Question

我一直在搜尋互聯網，盯着這段代碼已有一段時間，但我無法弄清楚。 任何幫助將不勝感激。

我正在嘗試制作一個圖表，用戶可以在其中輸入尺寸，而畫布包含一個圖表，用戶可以在其中單擊每個框，並更改該框的陰影。 但是，由於某些原因，這些框僅占圖表的一部分。

我的html文件：

<body>
        <canvas id="box"></canvas>  
        <script>
            var canvas = document.getElementById('box');
            var ctx = canvas.getContext('2d');
        </script>
        ...
        <button type="button" id="buildDiagram">Go!</button>

        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/diagramFuncts.js"></script>  
</body>

diagramFuncts.js：

  $('#buildUry').click(function() {
    ....
            ctx.fillStyle = "rgb(252,252,252)";
            ctx.fillRect(0, 0, width, height);
            //each box is 50 by 50 and the boxes populate the canvas from the upper left corner
            for (i = 0; i < rows; ++i) {
                for (j = 0; j < cols; ++j) {
                    ctx.fillRect(50*j, 50*i, 50, 50);       
                    ctx.strokeRect(50*j, 50*i, 50, 50);
                }
            }
  });

此代碼生成正確大小的畫布，但未正確填寫。 例如，一個2 x 3圖是100x150像素，但是內部框的尺寸太小。

如果有人在我的代碼中發現任何錯誤，我將非常感謝。

Answer 1

現場演示

這兩行只需要交換i和j。

ctx.fillRect(50 * i, 50 * j, 50, 50);
ctx.strokeRect(50 * i, 50 * j, 50, 50);

列（J）將是Y的第二個參數，行（I）將是X的第一個參數。

var canvas = document.getElementById('box');
var ctx = canvas.getContext('2d');
var rows = 2,
    cols = 3,
    width = rows*50,
    height = cols*50;

canvas.width = width;
canvas.height = height;


ctx.fillStyle = "rgb(252,252,252)";
ctx.fillRect(0, 0, width, height);

//each box is 50 by 50 and the boxes populate the canvas from the upper left corner
for (i = 0; i < rows; ++i) {
    for (j = 0; j < cols; ++j) {
        ctx.fillRect(50 * i, 50 * j, 50, 50);
        ctx.strokeRect(50 * i, 50 * j, 50, 50);
    }
}

jQuery Canvas繪制不一致的形狀

問題描述

1 個解決方案

解決方案1
1 2014-06-23 15:10:59

現場演示

jQuery Canvas繪制不一致的形狀

問題描述

1 個解決方案

解決方案1 1 2014-06-23 15:10:59

現場演示

解決方案1
1 2014-06-23 15:10:59