javascript - 为什么在 Canvas 中创建的行为不遵循规定的宽度和高度？

Question

我有一个 div，在 div 里面我有一个 Canvas ，我需要在 Canvas 中创建一个矩形..

this.canvas = {
            innerElement: TBE.CreateRectCanvasElement (Element.config.displayWidth, Element.config.displayHeight)
        };
    this.canvas.innerElement.style.border = '1px solid black';
    this.innerElementCtx = this.canvas.innerElement.getContext("2d");
    this.innerElementCtx.fillStyle = '#3ac6e5';
    this.innerElementCtx.fillRect(50, 50, 100, 100);

但是 rect 结果不是 50px n 50px 距离左上角 n 并且高度比宽度大得多......为什么？

http://jsfiddle.net/dpQ64/3/

Answer 1

是因为你没有设置<canvas>的宽高在 HTML 中。
默认为 1:1比例，既然你做到了100:300在 CSS 中，它的宽度缩小了 1/3 .