Question

我创建了一个简单的画布元素

<canvas style="width:100%;height:100%;" id="canvas"></canvas>

当我试图获得高度，但是在javascript中：

var canvas = document.getElementById(config.elementId);
console.log(canvas.height); //150
console.log(canvas.width); //300

console.log(canvas.style.height); //100%
console.log(canvas.style.width); //100%

如果我在chrome的调试器中检查元素，并实际将鼠标悬停在元素上，则chrome会将元素大小报告为

1627x925px

我如何在js中进行1627x925px测量？

Answer 1

正如@Alex所说，您可以使用getComputedStyle函数来获取画布的当前大小。

但是...... 总是使画布全屏宽度和高度，这意味着即使调整浏览器大小，也需要在将画布大小调整为{的函数中运行绘制循环。 {1}}和window.innerHeight。

一旦这样做，您可以使用普通的window.innerWidth和canvas.height函数来正确获取画布大小：

canvas.width

加号：使用此CSS黑客可以使画布完整尺寸而不会出现问题：

(function() {
    var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

    // resize the canvas to fill browser window dynamically
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        /* Your drawings need to be inside this function
         * to avoid canvas to be cleared. */
        drawStuff(); 
    }
    resizeCanvas();

    function drawStuff() {
        console.log(canvas.height); //925
        console.log(canvas.width); //1627
        // do your drawing stuff here
    }
})();

Answer 2

我们可以监视计算出的样式！

document.defaultView.getComputedStyle(canvas).height
document.defaultView.getComputedStyle(canvas).width

获取画布元素的高度

2 个答案: