0

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

<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

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

4

2 回答 2

1

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

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

一旦你这样做了，你就可以使用 normalcanvas.height和canvas.width函数来获得正确的画布大小：

(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
    }
})();

另外：使用这个 CSS hacks 使画布全尺寸没有问题：

/* remove the top and left whitespace */
* { margin:0; padding:0; } 

/* just to be sure these are full screen*/
html, body { width:100%; height:100%; }

/* To remove the scrollbar */
canvas { display:block; }
于 2012-11-23T07:30:19.730 回答
0

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

document.defaultView.getComputedStyle(canvas).height
document.defaultView.getComputedStyle(canvas).width
于 2012-11-23T06:45:55.500 回答