使用 createJS 绘制正方形会创建矩形

Question

除了标题不完全正确之外，我在使用 createJs 绘制正方形时遇到了问题。我正在绘制具有同样大边的矩形，通常会生成一个正方形，但不适合我，我得到了这个：

我使用的代码如下（非常简化）：

function getRandomNumber(max)
    {
        return Math.floor(Math.random() * max);
    }

var colors = ["Red", "Green", "Blue"];

function createTileArea()
    {
        var stage = new createjs.Stage("tileArea");
        stage.name = "stage";
        var size = 50;

        for (row = 0; row < 10; row++) {
            for (col = 0; col < 10; col++) {
                var id = row + "_" + col;
                var color = colors[getRandomNumber(3)];

                var tile = new createjs.Shape();
                tile.graphics.beginFill(color);
                tile.graphics.drawRect(0, 0, size, size);
                tile.graphics.endFill();
                tile.x = col * size;
                tile.y = row * size;
                tile.height = size;
                tile.width = size;
                tile.name = id;

                stage.addChild(tile);
            }
        }

        stage.update();
    }

createTileArea();

我这里有个小提琴：http://jsfiddle.net/QWP3Z/2/

我的问题是：我有一个宽度和高度为 500 像素的画布，我正在生成 10 个高度和宽度为 50 像素的矩形，那么为什么我得到 6 个水平正方形和三个垂直正方形那都是矩形？ 这是某种缩放问题吗？

Answer 1

不要使用 css 样式来调整画布的大小，而是直接在 html 或代码中更改其宽度和高度。 否则 createJs 将设置宽度和高度，这似乎默认为 300X150，并且 css 将充当缩放以将其放回 - 在您的示例中 - 500X500。