Question

在Chrome中测试。如果我动态创建一个canvas对象，请把它放到这样的div中：

$('<div />').css({
    width: '95%',
    margin: '0px auto',
    border: '1px solid red'
})
.append(
    $('<canvas />')
        .attr({ id: 'myCanvas' })
        .css({ width: '100%' })
)
.appendTo('body');

然后在所有调整大小事件中，我尝试显示大小：

function updateCanvas() {
    console.log($('#mycanvas').get(0).width);
    console.log($('#mycanvas').innerWidth());
}

/* listening to whatever change it can be on the device */
var eventListen = function() {
    window.addEventListener("orientationchange", eventResize, false);
    window.addEventListener("resize", eventResize, false);
};
var eventResize = function() {
    window.removeEventListener("orientationchange", eventResize, false);
    window.removeEventListener("resize", eventResize);
    window.setTimeout(function(){
        /* small timeout in case of lot of resize (dragging) */
        var w=innerWidth;
        var h=innerHeight;
        window.setTimeout(function(){
            if ((innerWidth!=w) || (innerHeight!=h)) {
                eventResize();
            } else {
                updateCanvas();
                eventListen();
            }
        }, 100);
    }, 100);
}
eventListen();

结果不同！ Pure DOM给出了画布的实际大小，而$('#mycanvas').innerWidth()给了我更大的结果......

Answer 1

我认为这个方案应该回答你的问题（在谷歌图片中找到）

http://stacktrace.jp/jquery/api/css/img/dimensions_width.png

宽度和内部宽度之间的差异由填充。

编辑：更正

正如PE所指出的，这种差异是由于你使用的width（）方法实际上是object属性，它与css属性不同。如果未设置canvas属性，则width属性默认为300，height属性默认为150. width和height CSS属性控制元素在屏幕上显示的大小。

更多信息： http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting.html#attr-canvas-width

Answer 2

不同之处在于你正在检查两种不同的东西

get(0).width是画布'对象的width属性，它不受css样式的影响/改变，并且由元素的width属性或js中的.width属性设置。根据{{3}}默认为300x150。

jQuery的width()，innerWidth()等方法正在计算canvas元素的布局大小，它受css样式的影响。

为什么innerWidth（）给出的结果与get（0）.width不同？

2 个答案: