Live Demo

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乘3的图表是100x150像素，但内部框的尺寸太小。

如果有人在我的代码中看到任何错误，我真的很感激。

Answer 1

Live Demo

这两行只需要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 个答案:

Live Demo