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％高度時會考慮高度和垂直填充。