Question

我制作游戏并希望游戏画布在页面上排成一行，这样它就可以很好地放在街机柜框架图形中。我设置了百分比宽度和画布高度＆＃34; auto。＆＃34;适用于Firefox和Chrome。

不幸的是，在某些版本的Internet Explorer（特别是9）中，画布高度的工作方式与其他浏览器的工作方式不同。当你将它设置为＆＃34; auto，＆＃34;时，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>

Link to the game

Answer 1

IE的一些旧版本，如IE9对待CSS高度：自动不同。并尝试从父元素继承CSS高度。

而不是尝试更改canvas元素上的CSS样式高度。使用setAttribute()

设置canvas元素的height属性

https://developer.mozilla.org/en-US/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 article on debounce resize event，这样你的resize事件只会在最后一次调整大小的事件中触发。由于调整大小会在窗口的每次移动时不断发出火焰。

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％高度时会考虑高度和垂直填充。

HTML Canvas不会在IE中调整大小

2 个答案: