javascript - 画布未正确调整为 div 的大小（滚动条问题？？）

Question

我不知道是否有人注意到这一点，但我会试一试。

因为画布的行为与其他 HTML 元素不同，所以我使用 resize 事件而不是 CSS 来调整它的大小。这个效果很好，

除非将浏览器的大小从最大化调整为正常，在这种情况下画布小于 div。区别在于

滚动条的宽度。事实上，当我使画布足够大以强制使用滚动条时，这不会发生。

这与调整大小事件的时间有关吗？有人知道如何解决吗？

编辑

这适用于 IE9（右侧）和 Safari（底部和右侧）。但不适用于 Chrome 和 FF。

在这里拉小提琴->拉小提琴

/编辑

window.onload = function()
{
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    window.addEventListener('resize', doTheResize, false);
}

function doTheResize()
{
    canvas.width = div.clientWidth;
    canvas.height = div.clientHeight;
    drawThings();
}

Answer 1

使用getBoundingClientRect获取宽度和高度并使画布具有该大小。

现场演示

全屏

标记

<div class="container">
    <canvas id="canvas"></canvas>
</div>

CSS

html, body {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
.container {
    height:100%;
    width:600px;
}

JS

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = canvas.parentNode.getBoundingClientRect().width;
canvas.height = canvas.parentNode.getBoundingClientRect().height;

ctx.fillRect(0, 0, canvas.width, canvas.height);

window.onresize = function () {
    canvas.width = canvas.parentNode.getBoundingClientRect().width;
    canvas.height = canvas.parentNode.getBoundingClientRect().height;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}