为什么在画布中创建的矩形不遵循规定的宽度 n 高度？

【问题标题】：Why the rect created in the canvas doesn't follow the width n height stated?为什么在画布中创建的矩形不遵循规定的宽度 n 高度？
【发布时间】：2011-11-20 15:25:36
【问题描述】：

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

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 50px 并且高度远大于宽度...为什么？

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

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

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

【讨论】：

btn 在 html 和 css 中设置有什么区别？我曾经问过这个 qn (stackoverflow.com/questions/8032434/…)，给出的答案建议 tt 我使用 css 而不是 html，因为 html 一个不起作用...
HTML 定义了它的大小，在 CSS 中设置不同的大小会拉伸它。
顺便说一句，在我的代码中添加宽度 n 高度的 setAttribute 后，它可以工作了！但是，在我问的另一个 qn 的情况下，为什么 HTML 不起作用，但 CSS 起作用？谢谢
@yeeen，恭喜！ :) 只是这样想：HTML 设置它的大小，CSS 拉伸它。