HTML Canvas将不会在IE中调整大小

Question

我正在制作一个游戏，希望游戏画布在页面上对齐，以便它很好地位于街机柜框架图形中。 我将其设置为百分比宽度，并将画布高度设置为“自动”。 在Firefox和Chrome中效果很好。

不幸的是，在某些版本的Internet Explorer（特别是9）中，画布高度的工作方式与其他浏览器不同。 当您将Firefox设置为“自动”时，它会以合理的方式调整高度，但是IE的工作方式有所不同。

因此，我尝试使用Javascript动态调整其大小。 这是我正在使用的代码。 我对JS不太满意。 我几乎只是从Google搜索中复制了此内容并更改了变量名。

谁能帮我弄清楚为什么它不起作用？

<script>
    (function() {
        var 
            htmlCanvas = document.getElementById('c2canvas'),
            context = htmlCanvas.getContext('2d');
        initialize();

        function initialize() {
            window.addEventListener('resize', resizeCanvas, false);
            resizeCanvas();
        }


        function resizeCanvas() {


            var width = htmlCanvas.width;
            var height = width * (224/256);
            htmlCanvas.height = height;
            htmlCanvas.style.height = height + 'px';

        }

    })();
</script>

链接到游戏

Answer 1

某些较旧版本的IE（例如IE9）对待CSS height：auto的方式有所不同。 并尝试从父元素继承CSS高度。

而不是尝试更改canvas元素上的CSS样式高度。 设置画布元素的height属性，而不是使用setAttribute（）

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/setAttribute

<script>
(function() {
    var 
        htmlCanvas = document.getElementById('c2canvas'),
        context = htmlCanvas.getContext('2d');
    initialize();

    function initialize() {
        window.addEventListener('resize', resizeCanvas, false);
        resizeCanvas();
    }


    function resizeCanvas() {

        var width = htmlCanvas.width;
        var height = width / 2.031;
        /* set the height attribute instead of using CSS style height */
        htmlCanvas.setAttribute(height,height);

    }

})();
</script>

不要忘记添加到您的CSS样式表

#c2canvas{
    display: block;
    width: 100%;
}

也可以看看Paul Irish的有关去抖动调整大小事件的文章，这样您的调整大小事件将仅在上一次触发调整大小事件时触发。 由于调整大小会不断触发窗口的每一次移动。

Answer 2

如果您要保持宽高比，请尝试以下操作：

<div style="height:0;padding:87.5% 0 0;width:100%;position:relative;">
    <canvas style="height:100%;width:100%;position:absolute;top:0;left:0;" >
</div>

显然，可以使用CSS完成。

垂直方向上的填充百分比基于元素的宽度。 内部绝对定位的元素在计算其100％高度时会考虑高度和垂直填充。